How to use jQuery on() when a element is "ready" rather than an event received? -

i'm trying build half-transparent menu (and other things), codes this:

    $(".hover-opaque").on({         load: function () {             $(this).addclass("opacity02");         },         mouseenter: function() {             $(this).removeclass("opacity02");             $(this).addclass("opacity1");         },         mouseleave: function() {             $(this).removeclass("opacity1");             $(this).addclass("opacity02");         }     }); 

when it's loaded (or, "ready"), addclass("opacity02") make half transparent, , when mouse entered, make opaque addclass("opacity1"), , when mouse leave, opposite side again.

so far mouseenter , mouseleave work well, "load"(or "ready") not work. of course can this:

    $(".hover-opaque").addclass("opacity02"); 

but heard cannot deal ajax-generated contents.

so what's problem?

by way, tried putting above mention codes in document.ready() , not, both did not work.

i checked lots of samples of jquery.on(), of them handling "click" "mouseenter" or other events.

thanks helping.

as @adeneo said, "ready" event works document. , manipulation of dom should done after document ready. code should reside inside $(document).ready (unless javascript inline after html, bad practice).

then can add class .hover-opaque element. no need individual "ready" event it.

for example:

$(function() { // shorthand $(document).ready   $(".hover-opaque").addclass("opacity02").on({     //...your events...   }); });