jQuery Mobile 1.4 更新

原始文章適用于 jQuery Mobile 1.4 之前使用的舊的頁面處理方式。這種舊方法現(xiàn)已棄用，并將保持有效，直到 jQuery Mobile 1.5（含），這意味著至少在明年和 jQuery Mobile 1.6 之前您仍然可以使用下面提到的所有內容。

舊事件，包括 pageinit ，不再存在并已被 pagecontainer 小部件取代。 Pageinit 被完全刪除，您可以使用 pagecreate 代替，保持不變。

如果您對處理頁面事件的新方式感興趣，請參閱這篇文章。否則，請隨意繼續(xù)閱讀本文，因為它不僅僅涵蓋頁面事件，還可能提供有價值的信息。

較舊的內容

本文也可以作為我的博客的一部分找到這里.

$(document).on('pageinit') vs $(document).ready()

當你第一次學習 jQuery 時，你會被教導在 $(document).ready() 函數(shù)中調用代碼，這樣一切都會在 $(document).ready() 函數(shù)內執(zhí)行DOM 已加載。然而，在 jQuery Mobile 中，Ajax 用于在您導航時將每個頁面的內容加載到 DOM 中，這意味著 $(document).ready() 將在加載第一個頁面之前觸發(fā)。因此，任何用于頁面操作的代碼都將在頁面刷新后執(zhí)行，這可能會導致微妙的錯誤。在某些系統(tǒng)上，它可能看起來工作正常，但在其他系統(tǒng)上，它可能會導致不穩(wěn)定且難以重復的行為。

經(jīng)典 jQuery 語法：

$(document).ready(function() {

});

解決此問題（這確實是一個問題），jQuery Mobile 開發(fā)人員創(chuàng)建了頁面事件。簡而言之，頁面事件是在頁面執(zhí)行的特定點觸發(fā)的事件。其中一個頁面事件是 pageinit，我們可以按如下方式使用它：

$(document).on('pageinit', function() {

});

我們可以通過使用頁面 ID 而不是文檔選擇器來更進一步。假設我們有一個 ID 為 index:

<div data-role="page">

的 jQuery Mobile 頁面，要執(zhí)行僅適用于索引頁面的代碼，我們可以使用以下語法：

$('#index').on('pageinit', function() {

});

pageinit 事件將在每次頁面即將加載并首次顯示時執(zhí)行 時間。除非手動刷新頁面或者關閉Ajax頁面加載，否則不會再次觸發(fā)。如果您希望每次訪問頁面時都執(zhí)行代碼，最好使用 pagebeforeshow 事件。

這里有一個演示此問題的工作示例：http://jsfiddle。網(wǎng)/Gajotres/Q3Usv/

關于這個問題的更多說明。無論您使用的是具有多個頁面的 1 HTML 還是多個 HTML 文件范例，都建議將所有自定義 JavaScript 頁面處理分離到一個單獨的 JavaScript 文件中。這不會使您的代碼變得更好，但它將提供更好的代碼概述，特別是在創(chuàng)建 jQuery Mobile 應用程序時。

還有另一個特殊的 jQuery Mobile 事件，稱為 mobileinit。當 jQuery Mobile 啟動時，它會在文檔對象上觸發(fā) mobileinit 事件。要覆蓋默認設置，請將它們綁定到 mobileinit。 mobileinit 用法的一個很好的例子是關閉 Ajax 頁面加載或更改默認的 Ajax 加載器行為。

$(document).ready(function() {

});

頁面事件轉換順序

所有頁面事件的列表可以在這里找到：http://api.jquerymobile.com/category/events/

假設我們有頁面A和頁面B；這是卸載/加載順序：

1. 頁面 B - 事件 pagebeforecreate
2. 頁面 B - 事件 pagecreate
3. B頁-活動pageinit
4. 頁面 A - 事件 pagebeforehide
5. 頁面 A - 事件 pageremove
6. 頁面 A -事件pagehide
7. 頁面 B - 事件 pagebeforeshow
8. 頁面 B - 事件 pageshow

為了更好地理解頁面事件，請閱讀這個：

• 加載前頁面，頁面加載，

以上是jQuery Mobile：`$(document).ready()` 與 `$(document).on('pageinit')` – 我應該使用哪個？的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！