When should I use jQuery’s document.ready function?

by

In simple words,

$(document).ready is an event which fires up when document 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,

  1. $(document).ready does not wait for images or scripts. Thats the big difference between $(document).ready and $(document).load

  2. Only code that accesses the DOM should be in ready handler. If it’s a plugin, it shouldn’t be in the ready event.

Leave a Comment

tech