Does this code need to be in a document.ready?

Question

The document.ready is used to execute code after the DOM is fully loaded. This can be used to attach event handlers to elements on the page e.g

Answer 1

When using actions to elements or calling them (that will be generated in DOM or don't exist yet) you need to use $(document).ready

Answer 2

1. When binding event handlers to the document itself, is it necessary to put that code in a document.ready?

No. In fact, the 'on' methods for binding in JQ can delegate at the document so you could use those at any time on any element safely as long as there wasn't a lot of bubbling being stopped at container elements with stopPropagation.

2. Are there any downsides to not wrapping the code in the document.ready?

Only that scripts in the head might try to hit HTML that isn't there yet. The converse is that HTML might be ready and getting events from the user before the doc is. See 'on' methods or google 'event delegation' for having your cake and eating it too where events are concerned (the caveat is libraries that use stopPropagation stupidly). document.ready is mostly just a way to be certain your code is firing when the HTML is ready to be hit. It's not necessary for code that falls at the bottom of the body tag unless (maybe) you're hitting body itself with something.

3. What sequence of events take place when the document is being constructed, right before the document.ready is fired ?

At the point that document ready is fired, all tags have been parsed and the layout dimensions have been established. Images do not need to have fully loaded, and I'm only guessing, but I suspect non-layout impacting CSS may not be in effect yet in some browsers. An element is considered 'ready' when its closing tag has been read and executed on by the HTML parser. JS in script tags must be handled by an interpreter before HTML parsing can continue, which is why we tend to put our code at the bottom of the doc nowadays anyway, for faster perceived loading time.

Answer 3

In addition to the answers: you can mere use jquery live function (instead of keydown, etc.) to be free of the situation 'DOM elements must be finished'.

So the next must work properly:

$( "#somediv" ).live( 'keydown', function(){ ... } );

In this case jQuery binds the event when it is possible. You don't have a pain to place all bindings in one (ready) function, your bindings can be placed in independent parts of your HTML page or Javascript files.

So, the result answer is: no, you don't need to place your code in document.ready when you use the mentioned function.

Update

In the last versions of jQuery (>= 1.7) use on() function instead of live() because the last one is depricated. So, it's not necessary to place event bindings into ready().

Answer 4

If you are binding to the document itself, you don't need to wait until it is ready. There shouldn't be any downsides to not wrapping it in document.ready in this case.

document.ready gets fired when the DOMReady event is triggered by the browser, or when a specific test is successful for versions of browsers that don't support the DOMReady event.

Additional information. (5/22/12)

Most modern browsers implement the DOMContentLoaded event which fires when all elements defined on the document are ready to be manipulated by javascript. Other browsers either rely on a setTimeout loop that continuously checks the readystate of the document or binds directly to the onreadystatechanged method of the document (taken from jquery core). The document itself is ready to be manipulated before javascript is ever executed, therefore you never need to wait when binding directly to the document.

The only gotcha here is that if the code interacts with elements other than the document, there is a chance that the event could be triggered on the document before those elements exist. It is very unlikely for that to happen, but it can happen. If that is something that can happen with your code, then it makes sense to place it inside of $(document).ready() to prevent that scenario. Your sample doesn't warrant being placed inside of $(document).ready().

Answer 5

The point of $(document).ready is to execute code after the entire document has been parsed.

You only need to use it if you want to use elements that don't exist yet.
(eg, if your script is in the <head>)

If the elements you're using already exist (either because they're global or because your <script> is below them), you don't need it.

Answer 6

This event gets triggered when the DOM hierarchy has been fully constructed i.e. all assets such as images have been completely received.

You asked:

• When binding event handlers to the document itself, is it necessary to put that code in a document.ready?
  • Answer: Nope. When using code that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the script in which your code resides or just before document.ready() block.

---

• Are there any downsides to not wrapping the code in the document.ready ?
  • Answer: No. But when you've to create elements inside your documents by using JavaScript, then should wait for sake until your DOM gets ready. For this, you should put your code inside document.ready() block.

---

• What sequence of events take place when the document is being constructed, right before the document.ready is fired ?
  • Answer: Before document.ready gets fired, DOMContentLoaded is already triggered by browser.