javascript - $(document).ready 等效于异步加载的内容

Question

我有一个 UI(我们称之为第 1 页)，其中包含大量 HTML 和 JavaScript。单击第 1 页上的某些元素时，将打开一个 jQuery UI 对话框并加载部分页面(我们称之为第 2 页):

$("#myDialog").dialog({ modal: true /* Other options */ });
$('#myDialog').load('page2Link', { }, function () { });
$('#myDialog').dialog('open');

第 2 页还有一堆 HTML 和 JavaScript。简化示例:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

<div id="page2Body">
    <!-- More elements -->
</div>

我在 page2Stuff.js 中有 JS，需要等到第 2 页完全呈现。我可以在这个部分页面中使用某些东西来查看新的 HTML 是否已添加到 DOM 中吗？我尝试了以下方法:

$('#myDialog').load('page2Link', { }, page2ReadyFunction);

找不到 page2ReadyFunction。我假设是因为 .load 在 page2Stuff.js 中运行 JavaScript，然后丢弃它或其他东西？

我现在能够让它工作的方式是使用 setTimeout 并不断检查 $('#page2Body') 是否返回除此之外的任何内容看起来不太理想。

Answer 1

与其将 script 标记放在第二页的开头，不如将其放在末尾，在所有 HTML 之后，如下所示:

<div id="page2Body">
    <!-- More elements -->
</div>

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

由于代码将根据源顺序执行，您可以放心，HTML 将在您的脚本运行时准备就绪。