我正在使用jquery mobile 和backbone.js 创建一个单页移动应用程序。这个想法是所有数据都是客户端本地的,而外部数据是通过 ajax 捕获的。此应用程序旨在使用 Phonegap 进行部署。
我将 jqm 用于一般的外观和感觉、样式、动画、页面更改等。Backbone.js 用于处理应用程序模型、服务器同步、模板渲染和路由。为了防止两个库之间发生冲突,jqm 中所有与 ajax 相关的功能都已禁用:
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
主页加载一个菜单,其中每个元素将您带到不同的应用程序视图。当您单击一个元素时,使用 AJAX 检索数据,动态生成 HTML 并附加到 DOM,然后应用程序更改为该页面。路由是使用 url 片段完成的,以获得更广泛的浏览器支持:
<a href="#news">News</a>
上面的代码使主干路由执行所需的操作以从服务器检索最新消息并呈现页面。所有这些都完美无缺。
我的问题:当我单击菜单的一个元素时,它所做的第一件事(甚至在执行我的任何代码之前)就是滚动到屏幕顶部。这似乎不是一个可怕的问题,但是无意的滚动会弄乱 jqm 在进行 ajax 调用时显示的加载指示器。如果运行此应用程序的设备不支持fixed
css 属性,则加载指示器位于单击的元素附近。因此,如果视口滚动到顶部,加载指示器将保持在原始位置。结果,加载指示部分或全部隐藏。
知道为什么会发生这种情况吗?我尝试使用 Visual Event 搜索 jquery / jquery mobile 附加的奇怪点击事件,但没有成功,所以我一定遗漏了一些东西。
提前致谢!
编辑以添加有关我正在使用的库的更多信息
jQuery:v1.6.2
jqm:v1.1.0(对于黑莓设备也是 v1.0,但 jqm 版本之间的行为不会改变)
骨干.js:0.9.2(截至撰写本文时最新)