$(document).ready() executes before it is ready?
consider a simplified version of what I'm running:
<html>
<head>
<script src="data.js"></script>
<script src="content.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
</html>
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:
$(document).ready(function()
{
loadContent();
});
for all intents and purposes, load content is loading just fine, but
within that code is 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. ( $("#panel_0").length actually returns zero). So I did a
couple troubleshooting tests:
<html>
<head>
<script src="data.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
<script src="content.js"></script>
</html>
and
<html>
<head>
<script src="data.js"></script>
<script src="content.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
<script>alert("Pause for DOM loading race condition");</script>
</html>
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?
No comments:
Post a Comment