jQuery Mobile：從ajax加載頁面後發生javascript中斷

Question

因此，我決定使用jQuery Mobile框架構建我的新移動網站。它具有通過ajax加載任何本地href鏈接的功能，這非常棒。但是加載的新頁面不響應任何javascript。我有一個主頁和第2頁，兩者都有相同的html佈局，內容有一些變化，我會舉一個例子。

我製作了一個導航菜單，從左側滑入並將主內容推向右側。當我點擊一個頁面鏈接時，它通過ajax加載新頁面，但在新頁面上，如果我點擊菜單按鈕，jQuery不會選擇它，所以沒有任何反應（菜單不會滑出）。

$(document).ready(function() { 
$(".menu-trigger").click(function() { 
    console.log("1") 
    if ($('nav').hasClass('navTransform')) { 
     console.log("2") 
    $('nav').removeClass('navTransform'); 
    $('article').removeClass('articleTransform'); 
    } 
    else { 
     console.log("3") 
    $('nav').addClass('navTransform'); 
    $('article').addClass('articleTransform'); 
    } 
}); 
}); 

這個jQuery腳本是在一個單獨的.js文件包含在這兩個頁面的頭部。我知道該腳本正常工作，因爲當我刷新頁面時，菜單觸發器起作用。有沒有已知的解決方法？

Answer 1

解決方法是使用適當的jQM處理程序pageinit()而不是jQuery就緒處理程序。

pageinit = DOM ready

的第一件東西的人在jQuery的學習是使用 $（文件）。就緒（）函數儘快執行DOM特定代碼 作爲DOM已準備就緒（這通常在onload事件發生之前很久）。 但是，在jQuery Mobile站點和應用程序中，請求頁面並將 注入到與用戶導航相同的DOM中，因此DOM準備好的 事件沒有那麼有用，因爲它僅執行第一頁。到 執行代碼每當一個新頁面加載並創建在jQuery Mobile中時，您可以綁定到pageinit事件。

所以，你的代碼可能是這樣的：

$(document).on("pageinit", "#page1", function(){ 
    //Your init code for page 1 goes here 
}); 

$(document).on("pageinit", "#page2", function(){ 
    //Your init code for page 2 goes here 
});