jquery-mobile - jQuery Mobile "Persistent Footer Navbar"按钮在刷新后才起作用

Question

环境

jQuery 1.7.1

jQuery Mobile 1.0 最终版

PHP w/CodeIgniter 2.1.0

灯具

测试:

GSM iPhone 4 与 iOS 5.0.1

库本图 11.10

谷歌浏览器 17.0.963.12 开发版

火狐 9.0.1

问题

在加载页面时，jQuery Mobile 恰本地假设我想要查看第一个“页面包装器”并将其显示得非常漂亮。 但是，当单击“使用”链接时，没有任何 react 。 什么都没有，我的意思是单击它不会加载具有适当 ID 的页面，也不会执行 post-back/ajax 调用。但是， 如果我刷新页面，我可以使用菜单 (包括使用按钮，然后是使用页面上的交易按钮)，因为它应该可以工作。

我查看了 Chrome 开发人员工具网络选项卡，但没有显示任何内容(因为它不应该，因为它是一个 anchor 链接并且内容已经在 DOM 中)。我已经在我的 iPhone 和 Chrome/Firefox(上面的相关版本号)上对此进行了测试。

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

问题

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

代码

注:下面的页面被包裹在一个普通的 HTML>Head+Body 骨架结构中，base_view，我已经省略了，但是如果你想看它，请问我会附加它。唯一添加的是视口(viewport)配置的元标记、两个 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"参数。

所以解决方案是改变:
<a href="account_detail.php" data-role="button">Account Details</a>
到:
<a href="account_detail.php" data-role="button" rel="external">Account Details</a>