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

Question

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

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

然后,它还有一堆HTML和JavaScript.简化示例:

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

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

我有JS内部page2Stuff.js需要等到第2页完全呈现.我可以在这个部分页面中使用什么来查看是否已将新HTML添加到DOM中？我尝试过以下方法:

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

这找不到page2ReadyFunction.我假设因为.load运行JavaScript page2Stuff.js然后丢弃它或什么？

我能够让它工作的方式现在使用setTimeout并不断检查是否$('#page2Body')返回任何东西,但这似乎并不理想.

Answer 1

不要将script标签放在第二页的开头，而是将其放在第二页的末尾（所有 HTML 之后），如下所示：

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

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

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