jQuery Mobile的pageinit/pagecreate不點火

我有5頁 - 爲了便於讓說：jQuery Mobile的pageinit/pagecreate不點火

one.html
two.html
three.html
four.html
five.html

當我加載每個單獨的頁面時，pageinit和pagecreate正確點火。

問題：

當我從one.html去two.html，pageinit和pagecreate都火，但是當我回到one.html（從two.html），pageinit和pagecreate請勿火。

爲什麼會這樣？我怎樣才能在頁面加載時始終激活pageinit和pagecreate以及瀏覽每個頁面？

更新：

對於每個頁面我有：

<div data-role="page" id="page-name"> 

// content 
</div>

爲了測試當事情射擊我在爲了做到：

$(document).on('pagecreate','[data-role=page]', function(){ 
    console.log('PAGECREATE'); 
}); 
$(document).on('pageinit','[data-role=page]', function(){ 
    console.log('PAGEINIT'); 
}); 
$(document).on('pagebeforeshow','[data-role=page]', function(){ 
    console.log('PAGEBEFORESHOW'); 
}); 
$(document).on('pageshow','[data-role=page]', function(){ 
    console.log('PAGESHOW'); 
});

如何使用pagechange總是撥打pageinit和pagecreate

來源

2012-05-10 cusejuice

onBack不會觸發，因爲您的頁面在DOM中。嘗試禁用jQuery手機中的ajax。或者如果好，那麼而不是5個不同的頁面，爲此嘗試'data-role = page'。它與您正在尋找的相同。 –

你正在檢查錯誤的事件，pageinit和pageshow是你應該關注的。

pageinit火災每次頁面加載的第一次，JQM緩存在DOM /內存，所以當您離開two.html回one.html頁面，pageinit不會火（它已經初始化）

pageshow火災每次頁面顯示，這是你需要看，當你從two.html導航回到one.html

一起，你可以拉斷了很多幹淨的代碼什麼，使用pageinit進行初始化，配置等，並將您的DOM更新爲初始狀態。如果你有在頁面上的動態數據可能視圖之間改變，在pageshow處理它

這裏有一個很好的設計，較大的網站，我們在生產環境中使用：

綁定現場活動在某些所有頁面/對話框pageinit和pageshow事件包括在每個頁面上：

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
我參考每個頁面的名稱：<div data-role="page" data-mypage="employeelist"> 在這個實況事件中，您基本上可以爲每個頁面「name」設置一個switch語句，然後檢查pageinit/pageshow或兩者的event.type並將代碼放在那裏，然後每次創建/顯示一個頁面該事件將被觸發，它知道觸發了哪個頁面，然後調用相應的代碼
現在無論用戶登錄到您的網站的哪個入口點，所有頁面的所有處理程序都是加載。正如你可能已經知道的那樣，當你導航到一個頁面時，它只能在div [data-role =「page」]中的<script/>--忽略<head/>中的任何JS，在每個頁面上放置單獨的JS是一團糟，應該是我相信在任何大型網站中都避免使用
儘量不要在jQuery中使用毛毯選擇器，例如$('div.myClass')，因爲這會搜索所有可能包含多個jQM頁面的DOM。幸運的是，在上面提到的pageinit/pageshow的實時事件處理程序中，this引用了當前頁面。因此，其中的所有DOM搜索，例如$(this).find('div.myClass')這可確保您只抓取當前頁面中的元素。（當然這不是ID的關注）。 注意在pageshow事件中，你也可以使用$.mobile.activePage，但這不是在pageinit可用的，所以我不使用它的一致性

我終於有太多的代碼，所以我建立了一個處理程序對象，其中每個頁面的js包含在一個單獨的js文件中，並且可以註冊處理程序與現場事件

缺點是您的整個網站的所有js都加載到用戶所到達的第一頁，但縮小即使是一個大的網站也比jQuery或jQM小，所以這不應該成爲一個問題。 但是如果你的網站真的很大，我想你可以看看RequireJS。

一個好處是你不再通過AJAX爲每個頁面加載所有的JS，每次用戶導航到一個新頁面。 如果你所有的JS都可以輸入，你現在可以把調試器語句和調試更簡單！

來源

2012-05-10 22:04:52

'pagecreate'幾乎可以與'pageinit'使用相同。不同的是'pagecreate'在部件開始初始化之前觸發，'pageinit'在之後觸發。關於事件的文檔頁面的頂部有一個很大的黃色塊來解釋這一點：http://jquerymobile.com/demos/1.1.0/docs/api/events.html。另外請注意，如果您想要每次顯示僞頁面時都執行某些操作，則可以將其綁定到'pageshow'事件，因爲它會在'pageinit'之後觸發以及隨後的頁面視圖。 – Jasper

但jquery說，pageinit已棄用，不應使用！ https://api.jquerymobile.com/pageinit/它說：...注意：這個事件已經在1.4.0中被棄用，以支持pagecreate。在上面的例子中簡單地替換pageinit。 – pashute

我相信當頁面被首次初始化並在DOM中創建時，和pagecreate都只被調用一次。

你可能想看看進入pagechange事件http://jquerymobile.com/test/docs/api/events.html

來源

2012-05-10 16:54:30 Chase

如果你想每次調用一些功能加載頁面之前，那麼你可以使用pagebeforeshow即

$("#YourPageID").on('pagebeforeshow ', function() { 
     //YourFunctionCall(); 
    });

，以及你可以試試將pageinit綁定到頁面id，但在將頁面插入到DOM中時，頁面init僅調用一次。 http://jquerymobile.com/test/docs/api/events.html

$("#YourPageID").on('pageinit', function() { 
     //YourFunctionCall(); 
    });

來源

2012-05-10 20:06:27 Tanveer

請注意，'.live（）'已被折舊，所以要小心使用它，因爲它可能會在某些時候從jQuery Core中消失：http://api.jquery.com/live – Jasper

+1謝謝Jasper .on是替換.live（），我已測試.on（）其工作正常 – Tanveer

您需要jQuery Mobile的活動文檔的thourough讀：http://jquerymobile.com/demos/1.1.0/docs/api/events.html

上面的鏈接提供了一些偉大的洞察時，每個事件觸發的，這裏有從頁面幾樣：

pageinit

觸發頁面上被初始化，之後我發生硝化。我們建議綁定到此事件而不是DOM ready（），因爲此將起作用，無論該頁面是直接加載還是作爲Ajax導航系統的一部分被拉入另一個頁面。

。

pageshow

引發了過渡動畫後「toPage」已完成。此事件的回調將接收其數據對象爲其第二個參數。此數據對象具有以下屬性： prevPage（object）一個包含頁面 DOM元素的jQuery集合對象，我們剛剛轉換了它。請注意，當應用程序啓動期間第一頁轉換時，此集合爲空。

要真正回答你的問題，請不要使用pageinit，請使用pageshow。 pageshow在初始顯示頁面時觸發（緊接在元素上觸發pageinit事件之後），而且還在隨後的頁面訪問中觸發。

來源

2012-05-10 20:12:47 Jasper

檢查這個代碼：

$(document).delegate("#pageid", "pageinit", function() { 
    console.log('PAGEINIT');  
});

來源

2012-05-11 09:11:58

下正常工作

<div data-role="page" id="signupForm"> 
    ... 
    ... 
<script type="text/javascript" src="test.js"></script> 
</div>

test.js可能包含以下代碼

// test.js starts here 

$('#signupForm').on('pageinit', function(){ 
    // your code goes here 
    ... 
    ... 

}); 
// test.js ends here

在你的登錄表單，你可能有linkup for signupForm and data-ajax =「false」應該包含在鏈接到signupForm的href標籤中。

編碼快樂

Kuppuram

來源

2013-04-20 02:11:25 Kuppuram

如果它是一個Ajax請求該頁面，腳本要寫進身體，否則它doen't工作在所有的阿賈克斯。

<!DOCTYPE html> 
<html> 
    <head> 
.......... 
    </head> 
    <body> 
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e"> 
........... 
    </div> 
    <script type="text/javascript" language="javascript" > 
    $('#self_edit_page').bind("pagebeforeshow",function(event) 
....... 
    </script> 
    </div> 
    </body> 
</html>

來源

2014-06-20 08:37:13 jackhoo

需要更多解釋 – kamesh

jQuery Mobile的pageinit/pagecreate不點火

回答

相關問題