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