Why should $.click() be enclosed within $(document).ready()?

by

The How jQuery Works document uses the example of binding a .click() inside of $(document).ready() to be certain that the element to which the .click() event is bound has been created when the function executes.

The .click() called with a function as its parameter does not execute the .click() on the nodes matching its preceding selector, but rather binds the function to the matching nodes’ onclick.

If you were to attempt to do something like this:

$('a').click(function(){
  alert('clicked me');
});

…in the document <head> or before any <a> element had been rendered, the event would not get bound to any node since no node matching the $('a') selector existed at the time the function executed.

Furthermore, if you did it when some <a> tags had been created, only those already created would get the bound event. <a> tags created after the function was bound wouldn’t have the .click() binding.

So in jQuery (and other JavaScript frameworks), you’ll often see the convention of adding event handlers, binding widgets, etc, inside a $(document).ready(function(){});

More Related Contents:

  1. Get the longest text in HTML document using Jquery or javascript
  2. Hide/Show image on one click [closed]
  3. Adding The Anchor Text As The Title Dynamicaly
  4. How to move an element into another element?
  5. Convert blob to base64
  6. jquery (or pure js) simulate enter key pressed for testing
  7. Format date to MM/dd/yyyy in JavaScript [duplicate]
  8. Check if an array is empty or exists
  9. How to prevent a click on a ‘#’ link from jumping to top of page?
  10. Convert JS Object to form data
  11. jQuery: Get selected element tag name
  12. jQuery drop down menu closing by clicking outside
  13. HTML anchor link – href and onclick both?
  14. jQuery pitfalls to avoid [closed]
  15. jQuery find and replace string
  16. how to wait for element visibility in phantomjs
  17. jQuery post request (not AJAX)
  18. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  19. how can I override console.log() and prepend a word at the beginning of the output?
  20. Appended new row is not behaving like previous one (row)
  21. How to individually target multiple dropdowns in CSS for Dropkick Plug-in
  22. Change text color based on brightness of the covered background area?
  23. HTML5 audio playlist – how to play a second audio file after the first has ended?
  24. HTML5 drag and drop folder detection in firefox. Is it even possible?
  25. Is it possible to do mathematics inside CSS?
  26. Adding click event for a button created dynamically using jQuery [duplicate]
  27. Safari with audio tag not working
  28. How do I make a div full screen?
  29. How to replace numbers in body to Persian numbers?
  30. How can I compare two color values in jQuery/JavaScript?

Leave a Comment