环境
> 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链接标记.
<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 -->
谢谢
提前感谢您花时间阅读本文以及您可以提供的任何帮助/反馈!