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

I have a UI (let's call it page 1) which has a lot of HTML and JavaScript in it. When some of the elements on page 1 are clicked, a jQuery UI Dialog is opened and loaded with a partial page (let's call that page 2):

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

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

Page 2 then has a bunch of HTML and JavaScript as well. Simplified example:

那么第2页也有一堆HTML和JavaScript。简化示例：

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

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

I have JS inside page2Stuff.js that needs to wait until page 2 is completely rendered. Is there something I can use within this partial page to see if the new HTML has been added to the DOM? I have tried the following:

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

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

This can't find page2ReadyFunction. I assume because .load runs the JavaScript in page2Stuff.js and then discards it or something?

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

The way I'm able to get it to work now it to use setTimeout and continually check to see if $('#page2Body') returns anything but this doesn't seem ideal.

我能够让它工作的方式现在它使用setTimeout并不断检查$（'＃page2Body'）是否返回任何内容，但这似乎并不理想。

6 个解决方案

#1

Instead of having your script tag at the beginning of your second page, put it at the end of it, after all the HTML, like this:

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

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

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

Since the code will be executed according to source order, you can rest assured that the HTML will be ready by the time your script runs.

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

#2

When you run the load function, it is expecting page2ReadyFunction to exist at that exact time. It does not because you haven't loaded the script. The following would get around that problem but also shouldn't work because the script will load asynchronously:

运行load函数时，期望page2ReadyFunction在该确切时间存在。它不是因为你没有加载脚本。以下将解决该问题，但也不应该工作，因为脚本将异步加载：

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

To get around that problem, you could do something like this:

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

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

This function tries every 100ms to see if page2ReadyFunction exists and calls it when it does.

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

Of course, you shouldn't have to worry about any of this because the child script tag will load asynchronously and the rendering should happen before the JavaScript executes. You could verify this by using console.log to see what fires first, the JavaScript in the client script or the callback function.

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

#3

the callback function for load from the jQuery docs: http://api.jquery.com/load/

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

complete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request completes.

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

This function executes when the request completes, but you need to wait until page2 has been rendered.

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

A simple solution would be to put a $(document).ready() block into the javascript files that page2 pulls.

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

#4

please if you want something to load after complete ajax load

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

you gotta use the

你必须使用

full ajax function like that

这样的完整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
        });

all that instead of

所有这些而不是

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

#5

Serve out Page 2 like this:

像这样服务：

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

#6

could you use something like this:

你能用这样的东西：

<body onload="function2kickOffP2()">

This would go on the body of page2.

这将继续在page2的主体上。

#1