Question

我有一个用户界面（让我们称之为第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在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就会就绪。

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()">

这将在第2页的主体上进行。

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

6 个答案: