在jQuery Mobile 中放置腳本的位置

了解jQuery Mobile 頁面變更

了解jQuery Mobile 頁面變更

jQuery Mobile 使用AJAX 來載入頁面。初始頁面按照常規方式加載，將 HEAD 和 BODY 內容插入到 DOM 中。但是，後續頁面載入僅提取 BODY 內容，特別是帶有 data-role="page" 的第一個 DIV。 BODY 中的任何剩餘內容，包括其他腳本，都將被丟棄。

對腳本執行的影響

此機制解釋了為什麼按鈕可能會顯示，但其單擊事件無法執行。點擊事件代碼存在於第二頁被丟棄的 HEAD 內容中。

解決方案1：將腳本移至BODY

一種解決方案是移動包含以下內容的SCRIPT 標籤將JavaScript 程式碼新增至每個後續頁面的BODY內容中：

雖然此解決方案速度很快，但它可能會使HTML 變得混亂。

解 2：將腳本集中在 Index.html 。 html

更有條理的方法是將所有JavaScript 合併到一個檔案中（例如，index.js），並在jQuery Mobile 載入後將其載入到初始頁面的HEAD 中：

• 這種方法比較優越，因為：
• 它將JavaScript組織在單一文件中。

它可以防止在 Phonegap 頁面刷新期間丟失 DOM 內容而導致 JavaScript 錯誤。

解決方案3：使用rel="external"

在頁面變更元素上使用rel="external" 會停用AJAX 載入並強制傳統Web應用程式行為。然而，這對於 Phonegap 應用程式來說並不理想。

實用的解決方案

最實用的解決方案是採用解決方案 2，但有所不同。將集中腳本放在每個後續頁面的 HEAD 中，確保頁面轉換後所有必需的 JavaScript 程式碼都可用，從而減輕 Phonegap 的錯誤行為所造成的潛在問題。

最終想法

以上是如何確保我的 JavaScript 腳本在 jQuery Mobile 基於 AJAX 的頁面轉換中正確執行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！