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

Question

我想加载外部 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 会像预期的那样工作。

Answer 1

不幸的是，这个时机是有道理的(即这是正确的行为)。标签内的脚本启动对 external.html 的检索，并且不等待它返回，它继续继续对 external.js 的检索。与此同时，“基本”文档仍在加载，并且可能(实际上可能)会在检索 externa.html 之前完成。

因此，您可能会遇到这样的计时情况:

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

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