考虑我正在运行的简化版本:
<html>
<head>
<script src="data.js"></script>
<script src="content.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
</html>
这显然还有更多内容，但这是基本要点。在 content.js 中，我有几个函数可以根据 data.js 中包含的 json 数据将标记加载到我的 div 中。除了这些函数之外，还有以下行:
$(document).ready(function()
{
loadContent();
});
出于所有意图和目的，加载内容加载得很好，但在该代码中调用了对几个 div 中的第一个 div 执行 jquery .show() 的调用，这些 div 在全部附加到容器后加载元素。该代码不会执行，几乎就像 div 还不存在一样。所以我尝试延迟加载:
<html>
<head>
<script src="data.js"></script>
</head>
<body>
<div id="contentGoesHere"></div>
</body>
<script src="content.js"></script>
</html>
果然，两者都会导致显示第一个面板。如果 .ready() 应该等到 DOM 加载完成，为什么延迟加载包含 $(document).ready() 函数的文件会产生影响？
最佳答案
在 DOM 准备就绪后，您将使用 Javascript 附加额外的 DOM 元素。 $(document).ready()加载初始 DOM 后触发。这意味着初始请求中发送的内容。它不知道您在外部 Javascript 中的动态附加。
此外，<head> 中包含的脚本部分在 <body> 之前同步加载部分已加载。
关于jquery - $(document).ready() 在准备好之前执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18726553/