jQuery 使用 $(document).ready 加载外部 JavaScript 失败答案

【问题标题】：jQuery load external JavaScript with $(document).ready failsjQuery 使用 $(document).ready 加载外部 JavaScript 失败
【发布时间】：2012-02-29 16:12:09
【问题描述】：

我想加载一个外部 HTML。此外，外部 HTML 包含一些 JavaScript 代码。由于加载函数没有加载这个脚本，所以我不得不使用getScript：

<div id="external-content"></div>

<script type="text/javascript">
  $("#external-content").load("external.html #myid", function() {
    // do something
  });
  $.getScript("external.js");
</script>

这就像一个魅力，除非 external.js 有一个 $(document).ready 命令，它试图从 external.html 访问元素。在我看来，该事件被触发得太早了。我还尝试输入命令 $.getScript("external.js");进入 .load 回调，但没有成功。请注意，单独唱 external.html 并直接包含 external.js 可以正常工作。

【问题讨论】：

为什么不在站点中包含您的 external.js，加载 external.html？并触发一个自己的事件， external.js 会对此做出反应？

标签： javascript jquery load getscript

【解决方案1】：

不幸的是，这样做的时机是有道理的（即这是正确的行为）。标记内的脚本会触发对 external.html 的检索，并且不会等待它返回，它会继续进行 external.js 的检索。与此同时，“基础”文档仍在加载中，可能（实际上很可能）会在检索到 externa.html 之前完成。

因此，您可能会遇到以下时机：

Document 确实准备好了（正在加载的 external.html 不是 DOM 可编写脚本的条件），external.js 已加载且可用，但 external.html 尚未完全加载。文档就绪函数将在 external.html 的元素出现之前触发（因为文档已经就绪！）。

如果您想继续这种方法，可能有一些方法可以重新调整它，以便您在 external.js 中使用 on() 将外部元素上的事件委托给基础文档 (#myid) 的侦听器。 html.

【讨论】：