jQuery Mobile“Persistent Footer Navbar”按钮在刷新之后才能工作

Question

环境

• jQuery 1.7.1
• jQuery Mobile 1.0 Final
• PHP w / CodeIgniter 2.1.0
• LAMP
• 测试：
  • 带有iOS 5.0.1的GSM iPhone 4
  • Kubuntu 11.10
    • Google Chrome 17.0.963.12 dev
    • Firefox 9.0.1

问题

在加载页面时，jQuery Mobile恰当地假定我想要查看第一个“页面包装器”并显示它非常漂亮。 然而，当点击“使用”链接时，没有任何反应。无论如何，我的意思是单击它不会加载具有适当ID的页面，也不会进行回发/ ajax调用。但是，如果我刷新页面，我可以使用菜单（包括用法按钮，然后在使用页面上显示“交易”按钮），因为它应该可以正常工作。

我查看了Chrome开发者工具网络标签，但没有显示任何内容（因为它不是因为它是一个锚链接，内容已经在DOM中）。我已经在iPhone和Chrome / Firefox上测试了这个（上面的相关版本号）。

我真的很想将这两个页面放在同一个DOM上，但我怀疑将它们拆分起来会有效。我想把它作为最后的手段。

问题

我是否有一些语法错误，或者我可能遗漏了jQuery Mobile环境的关键内容？

代码

注意：下面的页面包含在普通的HTML＆gt; Head + Body骨架结构，base_view中，我已经省略了但是如果你想看到它，请问我会附加它。唯一的补充是视口配置的元标记，两个Javascript脚本标记和两个CSS链接标记。

指向以下页面/ DOM的链接：

<a href="account_detail.php" data-role="button">Account Details</a>

包含持久性导航栏的页面：

<!-- ============ PAGE ONE ============ -->
<div id="transactions" data-role="page" class="ui-page"> 
<div data-role="header" data-position="fixed">
    <a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
    <h1>Transactions</h1>
</div> <!-- /header -->

<div id="content" data-role="content" class="ui-content">
    Hello World!
</div> <!-- /content -->

<div data-role="footer" data-position="fixed" data-id="account_details">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="#" class="ui-btn-active ui-state-persist">Transactions</a>
            </li>
            <li>
                <a href="#usage" data-transition="fade" data-prefetch>Usage</a>
            </li>
        </ul>
    </div> <!-- /navbar -->
</div> <!-- /footer -->
</div> <!-- /page one -->

<!-- ============ PAGE TWO ============ -->
<div id="usage" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
    <a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
    <h1>Usage</h1>
</div> <!-- /header -->

<div id="content" data-role="content" class="ui-content">
    Hello World, Again!
</div> <!-- /content -->

<div data-role="footer" data-position="fixed" data-id="account_details">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="#transactions" data-transition="fade" data-prefetch>Transactions</a>
            </li>
            <li>
                <a href="#" class="ui-btn-active ui-state-persist">Usage</a>
            </li>
        </ul>
    </div> <!-- /navbar -->
</div> <!-- /footer -->

感谢

提前感谢您花时间阅读本文以及您可以提供的任何帮助/反馈！

Answer 1

叹息。我只是没有正确阅读文档。当链接到具有多个页面的页面（多个data-role =“page”div或“page wrappers”）时，必须在指向多页文档的链接上设置rel =“external”参数。 / p>

所以解决方案是改变：

<a href="account_detail.php" data-role="button">Account Details</a>

要：

<a href="account_detail.php" data-role="button" rel="external">Account Details</a>