异步加载内容中的$(document）.ready等效项

$(document).ready equivalent in asynchronously loaded content

本文关键字：document ready 加载 异步      更新时间：2023-09-26

我有一个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')是否返回任何内容，但这似乎并不理想。

不要将script标记放在第二页的开头，而是在所有HTML之后将其放在最后，如下所示：

<div id="page2Body">
    <!-- More elements -->
</div>
<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

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

当您运行load函数时，它期望page2ReadyFunction在那个确切的时间存在。它没有，因为你还没有加载脚本。以下内容可以解决这个问题，但也不应该工作，因为脚本将异步加载：

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

为了解决这个问题，你可以这样做：

$('#myDialog').load('page2Link', { }, function() {
    function tryPageLoad() {
        if(page2ReadyFunction)
            page2ReadyFunction();
        else
            setTimeout(tryPageLoad, 100);
    }
    tryPageLoad();
});

此函数每隔100ms尝试一次page2ReadyFunction是否存在，并在存在时调用它。

当然，您不必担心这些，因为子脚本标记将异步加载，并且渲染应该在JavaScript执行之前进行。您可以使用console.log来验证这一点，看看首先触发的是什么，客户端脚本中的JavaScript或回调函数。

从jQuery文档加载的回调函数：http://api.jquery.com/load/

complete（responseText、textStatus、XMLHttpRequest）回调函数当请求完成时执行。

此函数在请求完成时执行，但您需要等待page2呈现出来。

一个简单的解决方案是将$（document）.ready（）块放入page2提取的javascript文件中。

如果你想在完成ajax加载后加载一些东西，请

你必须使用

像那样的完整ajax功能

var req= $.ajax({
            url:'page2Link',
            type:"post",
            data:{ajax:1,field_id:field_ids,whatever:whatever}
        }); 
        //after loading
        req.complete(function(res){
            $('#myDialog').html(res);
        });
        //after complete loading and request end
        req.always(function(res){
            page2ReadyFunction
        });

所有这些而不是

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

像这样提供第2页：

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>
<div id="page2Body">
    <!-- More elements -->
</div>
<script>
$(function() {
    // call your function from page2Stuff.js here
});
</script>

你能用这样的东西吗：

<body onload="function2kickOffP2()">

这将出现在第2页的正文中。

相关文章：