数据主题不适用于子页面 - JQuery mobile 和 Phonegap答案

【问题标题】：Data-Theme not applying to Subpage - JQuery mobile and Phonegap数据主题不适用于子页面 - JQuery mobile 和 Phonegap
【发布时间】：2013-09-04 18:15:57
【问题描述】：

我正在尝试开发一个基于 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，例如：/android_asset/www/js/jquery-1.8.3.js/)

另外，我脑海中挥之不去的另一个问题是，我无法打电话当我保留 page2.html 的正文内容时，Link1 的 CLICK 事件在与 index.html 相同的 HTML 文件中，作为子页面；单击 Link1 后，即使我给出 href="#p2", 而不是 href-"page2.html#p2"，我也不会重定向到 Page2.html .

【问题讨论】：

尝试将子页面重命名为页面。
我的屏幕是空的。屏幕闪烁了几次，然后我得到了这个空白屏幕。
问题应该是 data-ajax="false" 然后...将子页面重命名为 page 和 data-ajax="false"

标签： android html jquery-mobile cordova

【解决方案1】：

在 index.html 的列表分隔符中提供 data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。根据this link，

“提供 data-ajax="false" 很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史，而多个内部页面使用表示内部页面的哈希值，因此会有冲突。”

另外，将 data-role="subpage" 重命名为 data-role="page"。这是解决这个问题的方法。

【讨论】：