I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.
Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's document.ready
?
Some topics I'm interested in:
.on()
method: I use the .on()
method for AJAX quite a bit (typically on dynamically created DOM elements). Should the .on()
click handlers always be inside document.ready
?Update: To follow a best practice, all my javascript (the jQuery library and my app's code) is at the bottom of my HTML page and I'm using the defer
attribute on the jQuery-containing scripts on my AJAX-loaded pages so that I can access the jQuery library on these pages.
In simple words,
$(document).ready
is an event which fires up whendocument
is ready.
Suppose you have placed your jQuery code in head
section and trying to access a dom
element (an anchor, an img etc), you will not be able to access it because html
is interpreted from top to bottom and your html elements are not present when your jQuery code runs.
To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside $(document).ready
function which gets called when all the dom
elements can be accessed.
And this is the reason, when you place your jQuery code at the bottom (after all dom elements, just before </body>
) , there is no need for $(document).ready
There is no need to place on
method inside $(document).ready
only when you use on
method on document
because of the same reason I explained above.
//No need to be put inside $(document).ready
$(document).on('click','a',function () {
})
// Need to be put inside $(document).ready if placed inside <head></head>
$('.container').on('click','a',function () {
});
EDIT
From comments,
$(document).ready
does not wait for images or scripts. Thats the big difference between $(document).ready
and $(document).load
Only code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.