4

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

<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() 函数的文件会有所不同？

4

2 回答 2

5

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

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

于 2013-09-10T19:13:52.213 回答
0

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

$(window).load(function() {
  //code
});
于 2013-09-10T18:48:42.923 回答