title: When should I use jQuery's document.ready function?
body: <p>I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.</p>
  
  <p>Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's <code>document.ready</code>? </p>
  
  <p>Some topics I'm interested in:</p>
  
  <ol>
  <li>jQuery's <code>.on()</code> method: I use the <code>.on()</code> method for AJAX quite a bit (typically on dynamically created DOM elements). Should the <code>.on()</code> click handlers <strong>always</strong> be <strong>inside</strong> <code>document.ready</code>?</li>
  <li>Performance: Is it more performant to keep various javascript/jQuery objects <strong>inside</strong> or <strong>outside</strong> document.ready (also, is the performance difference significant?)?</li>
  <li>Object scope: AJAX-loaded pages can't access objects that were <strong>inside</strong> the prior page's document.ready, correct? They can only access objects which were <strong>outside</strong> document.ready (i.e., truly "global" objects)? </li>
  </ol>
  
  <p><strong>Update:</strong> To follow a best practice, all my javascript (the jQuery library and my app's code) is at the <strong>bottom</strong> of my HTML page and I'm using the <code>defer</code> attribute on the jQuery-containing scripts on my AJAX-loaded pages so that I can access the jQuery library on these pages.</p>