為什麼 jQuery Mobile 頁面腳本需要包含在「index.html」中？

為什麼使用jQuery Mobile 時必須在Index.html 中包含腳本

簡介

在jQuery Mobile 專案中，使用$.mobile.changepage() 重新導向頁面會造成混亂。開發人員必須將所有頁面腳本包含在同一個檔案index.html 中，否則重定向頁面將無法執行其標頭中定義的函數。本文解釋了這種現象背後的行為。

jQuery Mobile 如何處理頁面變更

jQuery Mobile 使用 Ajax 載入後續頁面。雖然第一頁正常加載，但後續頁面僅加載其正文內容。具體來說，只有第一個具有 data-role="page" 屬性的 div 會合併到 DOM 中，丟棄其他任何內容。

腳本無法操作的原因

在您的第二頁和後續頁面中，由於 HTML 正常呈現，按鈕可見。但是，點擊事件無法正常運行，因為在頁面轉換期間其父標頭被忽略。

解決方案1：將腳本移至正文內容

快速解決方案是將script 標籤新增至後續頁面的body 內容：

    <div data-role="page">
        // HTML content
        <script>
            // JavaScript
        </script>
    </div>

解決方案2：在Index.html 中合併腳本

首選解決方案是將所有JavaScript 移至單個文件，index.js，放置在第一個HTML 文件的頭部：

    <meta ...>
    <link rel="stylesheet" ...>
    <script src="jquery.mobile-1.2.0.min.js"></script>
    <script src="index.js"></script> // Your consolidated JavaScript

Index.html 合併的原因

Phonegap 與jQuery Mobile 一樣，可以顯示錯誤。如果所有 JavaScript 都放置在單一 HTML 檔案中，則可能會發生錯誤並刷新目前頁面。如果該頁面缺少所需的 JavaScript，則在重新啟動之前它將不再起作用。

現實解決方案

將 index.js 檔案移至所有其他 HTML 檔案的頭部。這可以確保即使其他 DOM 元素因錯誤而丟失，腳本也可以存取。

結論

了解 jQuery Mobile 如何處理頁面變更對於成功的應用程式開發至關重要。在 index.html 中合併腳本是確保腳本可用性並防止 Phonegap 潛在問題的建議解決方案。

以上是為什麼 jQuery Mobile 頁面腳本需要包含在「index.html」中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！