数据主题不适用于子页面-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”。 这是解决此问题的方法。