title: $(document).ready() executes before it is ready?
body: <p>consider a simplified version of what I'm running:</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;script src="data.js"&gt;&lt;/script&gt;
        &lt;script src="content.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id="contentGoesHere"&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There is obviously much more to this, but this is the basic jist.  Within content.js, I have several functions that load markup into my div based on json data included in the data.js.  In addition to these functions is the following line:</p>
  
  <pre><code>$(document).ready(function()
  {
      loadContent();
  });
  </code></pre>
  
  <p>for all intents and purposes, load content is loading just fine, but within that code is a call to perform a jquery .show() of the first div among several divs that get loaded in after they all get appended to the container element.  That code doesn't executing, almost as if the divs don't yet exist.  So I tried late loading:</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;script src="data.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id="contentGoesHere"&gt;&lt;/div&gt;
     &lt;/body&gt;
     &lt;script src="content.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>sure enough, both result in the first panel being displayed.  Why would late loading the file that has the $(document).ready() function in it make a difference if .ready() is supposed to wait until the DOM is loaded anyway?</p>