在部分頁面加載時未觸發jQuery準備好的事件

以下是原位：包含html並使用jQuery庫和頁面的頁面當單擊某個選項卡時，jQuery UI插件將加載另一個頁面。問題是，當頁面/ html被加載/渲染（讓我們簡化它，並說它只是做一些像$（「＃myDiv」）load（url）;），就緒事件不會被解僱，因爲當然「窗口「已經加載並觸發加載事件。這意味着我不想執行頁面加載（部分加載）的jQuery事情。 UI.tabs插件旨在將頁面加載到其他選項卡，我們可以假設其他頁面可能包含自己的jQuery ...所以應該有一些解決方法..在部分頁面加載時未觸發jQuery準備好的事件

我可以想到非常可怕的方式克服這個問題，就像在被渲染的頁面底部有一個腳本塊（加載到一個div中），這會完成我準備好被觸發時所做的所有事情（因爲您可以假設瀏覽器已經在腳本中渲染了腳本塊被擊中）。然而這是非常糟糕的做法。有什麼建議麼？

來源

2009-12-09 Mr AH

-1

我相信你可以做這樣的事情（從ASP.NET派生）：

<script type=」text/javascript」> 
    <!-- 
    Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End); 
    function Request_End(sender, args) 
    { 
      // Insert code you want to occur after partial page load here 
    } 
    // --> 
</script>

原本應該掛到，包括部分頁面更新結束請求事件。你顯然會更新上面的例子來調用你想要的適當的JS函數。

來源

2009-12-09 17:39:19

這是MS阿賈克斯，不是jQuery的，並通過'PageRequestManager'判斷我敢肯定它僅適用於ASP.NET WebForms的。 – Aaronaught 2011-09-16 15:46:40

瞭解，但如果你看AH先生提供的答案，他表示他使用ASP.NET。我提供了一種彌補.NET部分頁面加載的差距，解決他想要的任何JS函數（jQuery就緒事件或其他）的方式。 – 2011-09-16 16:28:10

load方法提供了一個回調，它在加載內容之後執行。

$("#myDiv").load(url, null, function() { 
    //do your stuff here 
});

完整的文檔和例子在jQuery.com：http://docs.jquery.com/Ajax/load

來源

2009-12-09 17:42:09 mkedobbs

你是如何燒製的AJAX請求到服務器？如果您使用的是ASP.NET AJAX，那麼Brian Hasden的答案就是您要查找的內容。如果您使用jQuery發送請求，則可以使用加載函數設置回調。

$(".ajaxLink").load(url, null, function() { 
    // code here 
});

load() Documentation

或設置觸發每一個Ajax調用完成一次全球ajaxComplete事件。

$(document).ajaxComplete(function() { 
    // code here 
});

ajaxComplete() Documentation

來源

2009-12-09 17:46:02

嗯 - 我使用ASP.NET MVC使用jQuery。我不是使用部分視圖（ascx）的這部分應用程序，而是我唱全視圖，但將它們加載到div。所以我有一個主視圖，頭部帶有一個對這個「類型」視圖的客戶端邏輯的js文件的引用。當點擊這個視圖上的一些標籤時，我們使用jquery選項卡將antoher視圖加載到某個div中。使用這個插件加載標籤的方式是簡單地給一個url（而不是使用加載 - 正如我指出的那樣 - 我可以添加一個回調函數而不是依賴就緒）。

但是，我不希望所有的客戶端邏輯都在某些父視圖中，因爲任何視圖都應該能夠通過url加載另一個視圖（子視圖包含指向其相關js文件的鏈接，其中包含加載時格式化/連接的所有邏輯）。

現在我真的很困惑的是，它似乎在某些情況下工作，而不是在其他情況下工作;例如1）當在IE中的一個框架中打開父視圖時，從屬觸發器從不被觸發2）當在IE中直接打開相同的URL時，子視圖被讀取器觸發3）當在FFX2中打開相同的URL時準備好每一個都不會觸發4）最後..但是當在FFX2中打開這個父視圖的子視圖（它具有子視圖）時，子觸發器準備好了！..令人困惑的..

我要運行一些測試n回到ya，關於爲什麼這種行爲可能會有所不同的建議，將不勝感激

更新：啊哈！..看起來像甚至與上述障礙清除，有瀏覽器的差異（顯然從上面的閱讀）..下面的簡單測試工程在IE7罰款，但在FFX2失敗。就緒事件在IE中觸發，但在將Test2.htm加載到Test1.htm時不會觸發FFX。根據我的經驗，我知道這意味着IE有一個「怪癖」，FFX正如你所期望的那樣基於W3C。所以它看起來像這樣的做法是不，不，除非任何人有任何建議？：

Test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test1.htm"); 
      $("#Test1").load("Test2.htm"); 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test1">EMPTY</div> 
</body> 
</html>

Test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test2.htm"); 
      //$("#Test1").load("Test3.htm"); // load more 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test2">EMPTY</div> 
</body> 
</html>

來源

2009-12-10 09:49:04

OK ..所以我有一個簡單現在回答這個問題，這應該意味着最少的代碼更改。具有js的子視圖（這些是沒有html，head或body標籤的真實aspx視圖）包含（實質上是客戶端行爲模型），它響應$（document）.ready，我們可以使用的建議mkedobbs提供類似的東西。簡單地說：

$("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); });

然後在子畫面JS包括

$(document).bind("PartialLoaded", function(){ .........});

來源

2009-12-10 13:29:51

在部分頁面加載時未觸發jQuery準備好的事件

回答

相關問題