數據主題不適用於子頁面-JQuery Mobile和Phonegap

Question

我正在嘗試在基於Phonegap和JQuery Mobile框架的應用程序中進行開發。

我已經將頁面和子頁面創建為單獨的HTML文件。

index.html文件的主體部分如下所示：

<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"  data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="page2.html#p2" rel="external">Link1</a></li>
<li><a href="page3.html#p3" rel="external">Link2</a></li>
</ul></div></div>

page2.html文件的正文部分將如下所示：

<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"  data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="index.html#p1" rel="external">Go Back</a></li>
</ul></div></div>

data-theme =“ e”已成功應用於index.html，而未應用於page2.html。 有人可以為我提供這種行為的原因嗎？

我正在使用JQuery 1.8.3和JQuery Mobile 1.2.1版本，並且在兩個HTML文件（ 例如：/ android_asset / www / css /jquery.mobile-1.2.1）中從本地存儲正確調用CSS和JS版本。 CSS， 例如：/ android_asset / www / js /jquery-1.8.3.js/）

• 另外，我還想不通的另一個問題是，當我將page2.html的正文內容保留在與index.html相同的HTML文件中作為子頁面時，我無法調用Link1的CLICK事件； 單擊Link1后，即使我給出href =“＃p2” 而不是href-“ page2.html＃p2” ，我也不會重定向到Page2.html。

Answer 1

在index.html的列表分隔符中提供data-ajax =“ false” 。 這告訴框架執行整個頁面重新加載，以清除URL中的Ajax哈希。 根據此鏈接 ，

“提供data-ajax =“ false”是至關重要的，因為Ajax頁面使用哈希（＃）來跟蹤Ajax歷史記錄，而多個內部頁面使用哈希指示內部頁面，因此會發生沖突。”

另外，將data-role =“ subpage”重命名為data-role =“ page”。 這是解決此問題的方法。