$(document).ready() 在准备好之前执行？答案

【问题标题】：$(document).ready() executes before it is ready?$(document).ready() 在准备好之前执行？
【发布时间】：2013-09-10 18:42:09
【问题描述】：

考虑一下我正在运行的简化版本：

<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();
});

出于所有意图和目的，加载内容加载得很好，但在该代码中是调用执行 jquery .show() 的几个 div 中的第一个 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 加载后触发。这意味着在初始请求中发送的内容。它不知道您在外部 JS 中的动态追加。
此外，<head> 部分中包含的脚本会在 <body> 部分加载之前同步加载。
@crush 你应该发布 ^^ 作为答案
对，我明白了。因此，在 .ready() 中，我附加了几个带有内容的“面板”，然后调用 $("#panel_0").show()。如果我在 .show() 之前没有任何显示，甚至没有显示 html。因此，使用警报中断 .ready() 函数表明还没有显示任何 html。
好的，所以头部的脚本很有趣。我很感激有资源可以阅读更多信息。

标签： jquery document-ready

【解决方案1】：

在 DOM 准备好之后，您将使用 Javascript 附加额外的 DOM 元素。 $(document).ready() 在初始 DOM 加载后触发。这意味着在初始请求中发送的内容。它不知道您在外部 Javascript 中的动态附加。

此外，<head> 部分中包含的脚本会在 <body> 部分加载之前同步加载。

【讨论】：

谢谢。第一部分与我的问题无关，因为我知道这一点，但同步加载解决了我的问题。

【解决方案2】：

尝试等待整个文档准备好，或多或少是这样的：

$(window).load(function() {
  //code
});

【讨论】：

感谢您的建议，但这并没有解决问题。我认为 Crush 可能正在做某事