為什麼我的 jQuery Mobile 腳本只能在第一頁運行？

聞起來像DOM...

最常見的jQuery Mobile 問題之一是“為什麼我必須將所有腳本放入index.html” 。您會發現其中的一些答案包含的噪音多於事實。這個問題將向您詳細解釋 jQuery Mobile 是如何運作的，以及為什麼如果您忘記包含它們，您的腳本將無法運作。

jQuery Mobile 如何處理頁面變更

要了解這一點您需要了解 jQuery Mobile 的工作原理。它使用ajax加載其他頁面。

第一頁正常載入。它的 HEAD 和 BODY 被加載到 DOM 中，它們在那裡等待其他內容。載入第二個頁面時，僅將其 BODY 內容載入到 DOM 中。更準確地說，即使是BODY也沒有滿載。只有第一個具有 data-role="page" 屬性的 div 才會被加載，其他所有內容都將被丟棄。即使 BODY 中有更多頁面，也只會載入第一個頁面。此規則僅適用於後續頁面，如果您在初始 HTML 中有更多頁面，則所有頁面都將載入。

這就是為什麼您的按鈕顯示成功但點擊事件不起作用。相同的點擊事件，其父 HEAD 在頁面轉換期間被忽略。

解決方案1

在第二頁和所有其他頁面中，移動您的SCRIPT 標記到BODY 內容中，如下所顯示：

    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>

這是一個快速的解決方案，但仍然是一個醜陋的解決方案。

工作範例可以在我的這裡的其他答案：頁面更改後未觸發Pageshow

另一個工作範例：使用jQuery 行動轉換以不同方式載入頁

解決方案2

將所有JavaScript移至原始的第一個 HTML 中。收集所有內容並放入單一 js 檔案中，放入 HEAD 中。在 jQuery Mobile 載入後初始化它。

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file

最後我將描述為什麼這是一個好的解決方案的一部分。

解決方案 3

使用 rel="external" 在您的按鈕和用於更改頁面的每個元素中。因此，ajax 不會用於頁面加載，您的 jQuery Mobile 應用程式將像普通的 Web 應用程式一樣運行。不幸的是，這對您的情況來說不是一個好的解決方案。 Phonegap 永遠不應該像普通的 Web 應用程式一樣運作。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文檔，查找章節：不使用Ajax 進行連結

現實解決方案

現實的解決方案將使用解決方案2。但與解決方案 2 不同，我將使用相同的 index.js 檔案並在每個可能的其他頁面的 HEAD 中初始化它。

現在你可以問我為什麼 ？

Phonegap 就像jQuery Mobile 一樣有缺陷，如果你的每個js 內容都在一個HTML 檔案中，遲早會出現錯誤，你的應用程式將會失敗（包括載入的DOM） 。 DOM 可以被刪除，Phonegap 將刷新您目前的頁面。如果該頁面沒有 javascript，則在重新啟動之前它將無法運作。

以上是為什麼我的 jQuery Mobile 腳本只能在第一頁運行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！