$（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>

我在page2Stuff.js中有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将准备就绪。

Answer 2

当您运行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或回调函数。

Answer 3

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

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

此函数在请求完成时执行，但您需要等到呈现第2页。

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

Answer 4

如果你想在完成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 () { });

Answer 5

像这样服务：

<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>

Answer 6

你能用这样的东西：

<body onload="function2kickOffP2()">

这将继续在page2的主体上。

$（document）.ready等效于异步加载的内容

问题描述

6 个解决方案

解决方案1
2 已采纳 2012-01-09 19:11:41

解决方案2
1 2012-01-09 19:01:05

解决方案3
1 2012-01-09 19:01:16

解决方案4
0 2012-01-09 19:02:13

解决方案5
0 2012-01-09 19:09:59

解决方案6
0 2012-01-09 19:12:35

$（document）.ready等效于异步加载的内容

问题描述

6 个解决方案

解决方案1 2 已采纳 2012-01-09 19:11:41

解决方案2 1 2012-01-09 19:01:05

解决方案3 1 2012-01-09 19:01:16

解决方案4 0 2012-01-09 19:02:13

解决方案5 0 2012-01-09 19:09:59

解决方案6 0 2012-01-09 19:12:35

解决方案1
2 已采纳 2012-01-09 19:11:41

解决方案2
1 2012-01-09 19:01:05

解决方案3
1 2012-01-09 19:01:16

解决方案4
0 2012-01-09 19:02:13

解决方案5
0 2012-01-09 19:09:59

解决方案6
0 2012-01-09 19:12:35