jQuery Mobile 1.4 更新

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

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

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

較舊的內(nèi)容

本文也可以作為我的部落格的一部分找到這裡.

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

當(dāng)你第一次學(xué)習(xí)jQuery 時，你會被教導(dǎo)在 $(document).ready() 函數(shù)中呼叫程式碼，這樣一切都會在 $(document).ready() 函數(shù)內(nèi)執(zhí)行DOM 已載入。然而，在 jQuery Mobile 中，Ajax 用於在您導(dǎo)航時將每個頁面的內(nèi)容載入到 DOM 中，這表示 $(document).ready() 將在載入第一個頁面之前觸發(fā)。因此，任何用於頁面操作的程式碼都將在頁面刷新後執(zhí)行，這可能會導(dǎo)致微妙的錯誤。在某些系統(tǒng)上，它可能看起來運(yùn)作正常，但在其他系統(tǒng)上，它可能會導(dǎo)致不穩(wěn)定且難以重複的行為。

經(jīng)典 jQuery 語法：

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

我們可以透過使用頁面 ID 而不是文件選擇器來更進(jìn)一步。假設(shè)我們有ID 為index:

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

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

這裡有一個示範(fàn)此問題的工作範(fàn)例：http://jsfiddle。網(wǎng)/Gajotres/Q3Usv/

關(guān)於這個問題的更多說明。無論您使用的是具有多個頁面的 1 HTML 還是多個 HTML 檔案範(fàn)例，都建議將所有自訂 JavaScript 頁面處理分開到一個單獨(dú)的 JavaScript 檔案中。這不會使您的程式碼變得更好，但它將提供更好的程式碼概述，特別是在創(chuàng)建 jQuery Mobile 應(yīng)用程式時。

還有另一個特別的 jQuery Mobile 事件，稱為 mobileinit。當(dāng) jQuery Mobile 啟動時，它會在文件物件上觸發(fā) mobileinit 事件。要覆蓋預(yù)設(shè)設(shè)置，請將它們綁定到 mobileinit。 mobileinit 用法的一個很好的例子是關(guān)閉 Ajax 頁面載入或更改預(yù)設(shè)的 Ajax 載入器行為。

頁面事件轉(zhuǎn)換順序

所有頁面事件的清單可以在這裡找到：http://api.jquerymobile.com/category/events/

假設(shè)我們有頁面A和頁面B；這是卸載/載入順序：

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

頁 B - 事件 pageshow

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

以上是jQuery Mobile：`$(document).ready()` 與 `$(document).on('pageinit')` – 我該使用哪一個？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！