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.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. jQuery document.createElement equivalent?
  3. How can I apply a jQuery function to all elements with the same ID?
  4. How to get a DOM Element from a jQuery selector?
  5. How do I create a link using javascript?
  6. jQuery checkbox change and click event
  7. Difference between “change” and “input” event for an `input` element
  8. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  9. $(document).ready shorthand
  10. jQuery DOM changes not appearing in view source
  11. Alternative to jQuery’s .toggle() method that supports eventData?
  12. jQuery equivalent of JavaScript’s addEventListener method
  13. How to find a parent with a known class in jQuery?
  14. jQuery count child elements
  15. How to detect when an iframe has already been loaded
  16. jQuery: how to change tag name?
  17. Why “$().ready(handler)” is not recommended?
  18. How can I remove all CSS classes using jQuery/JavaScript?
  19. Count immediate child div elements using jQuery
  20. How to unbind a specific event handler
  21. JavaScript moving element in the DOM
  22. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  23. JQuery html() vs. innerHTML
  24. Attaching events after DOM manipulation using JQuery ajax
  25. jQuery .on() method doesn’t see new elements
  26. Unloading/Removing content from an iFrame
  27. jQuery difference between :eq() and :nth-child()
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment