jQuery Mobile沒有觸發pageinit

現在，我的問題是'簡單'（問題是，解決方案可能不是）。我有一個使用$ .json（）檢索數據的函數。必須使用從'pageinit'/'pageshow'調用的函數將數據加載到<ul>中。雖然它根本不加載任何東西。但！當我刷新頁面時，它完全沒有問題地加載pageinit。jQuery Mobile沒有觸發pageinit

這是我的jQuery;

$('#showsPage').bind('pageshow', function(event) { 
    getShows(); 
}); 

/******* FUNCTIONS *********/ 
function getShows() 
{ 
    // Loading. 
    $.mobile.loading('show'); 

    // Load the data. 
    $.getJSON("some url", function(json) { 

     $("#listShows li").remove(); 

     $.each(json.data, function(index, show) { 

      $("#listShows").append("<li><a href='#'>Stuff</a></li>"); 
      $("#listShows").listview('refresh'); 

      // Hide the loading. 
      $.mobile.loading('hide'); 

     }); 
    }); 
}

我是否在做大幅度錯誤？我有一個頁面運行在不同的頁面上沒有問題。

來源

2012-10-05 Roel

由於jQuery Mobile的AJAX處理頁面轉換，您應該在綁定頁面事件時委派事件綁定，如pageinit或pageshow。

下面是一個例子：

$(document).on('pageshow', '#showsPage', getShows);

這將確保綁定不發生，直到#showsPage元素實際上是在DOM。

請注意，如果不傳入任何參數，您不需要匿名函數。在不傳遞任何參數的情況下，您可以將該函數的名稱作爲回調傳遞給.on()方法。

請注意，無論用戶何時刷新頁面或深入鏈接到您的站點，都需要綁定此委託事件處理程序，因此我建議將其置於外部腳本中並將該腳本包含在每個文檔的<head>之前結尾</body>標籤也起作用，只是不在data-role="page"元素內），以便任何頁面刷新都不會破壞您網站上的功能。另一種方法是將代碼放入data-role="page"元素中的特定頁面，以便通過AJAX將其引入到DOM中時，您的代碼將由jQuery Mobile進行分析。

來源

2012-10-05 16:06:12 Jasper

這工作對我來說，但我不知道爲什麼。它在一些頁面更改上工作，但不是其他的。但現在起作用，所以我只是想讓它們都是這樣。 – dgig

@ user399696這個答案基本上只是使用委託事件處理程序，這通常是jQuery Mobile項目的一個好主意。委託事件處理程序綁定到祖先元素，以便它現在和將來都可以在DOM中爲元素觸發。如果您有興趣，您可以研究「委派的事件處理程序」以瞭解更多信息。 – Jasper

jQuery Mobile沒有觸發pageinit

回答

相關問題