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

前端之家收集整理的这篇文章主要介绍了jquery-mobile – jQuery Mobile“Persistent Footer Navbar”按钮在刷新之后才能工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
环境

> jQuery 1.7.1
> jQuery Mobile 1.0 Final
> PHP w / CodeIgniter 2.1.0
>灯
>测试:

>带有iOS 5.0.1的GSM iPhone 4
> Kubuntu 11.10

>谷歌Chrome 17.0.963.12开发
> Firefox 9.0.1

问题

在加载页面时,jQuery Mobile适当地假定我想要查看第一个“页面包装器”并显示它非常漂亮.但是,单击“使用”链接时,没有任何反应.什么都不是,我的意思是单击它不会加载具有适当ID的页面,也不会进行回发/ ajax调用.但是,如果我刷新页面,我可以使用菜单(包括使用按钮,然后在使用页面上的事务按钮),因为它应该工作.

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

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

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

注意:下面的页面包含在普通的HTML> 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 -->

谢谢

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

解决方法

叹.我只是没有正确阅读文档.当链接到具有多个页面页面(多个data-role =“page”div或“page wrappers”)时,必须在指向多页文档的链接上设置rel =“external”参数.

所以解决方案是改变:

< a href =“account_detail.PHP”data-role =“button”>帐户详细信息< / a>

至:

< a href =“account_detail.PHP”data-role =“button”rel =“external”>帐户详细信息< / a>

原文链接:https://www.f2er.com/jquery/177311.html

猜你在找的jQuery相关文章