我将jQuery移动的添加到我的项目中,因为我希望滑动事件触发Bootstrap carousel滚动。在用它编码一天左右后,我注意到内部链接不再工作。我可以用下面的两个页面test1.html可靠地重现这一点:
<html>
<head></head>
<body>
<a href="test2.html">Another page</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">
</script>
</body>
</html>
test2.html:
<html>
<head></head>
<body>
<a href="test1.html">First page</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">
</script>
</body>
</html>
当我点击链接时,jQuery代码将抛出一个被吞下的已处理异常,但目标页面永远不会加载到浏览器中。当我删除jQuery移动的时,它以正常的方式工作。
我见过this question-添加data-ajax="false"
似乎确实解决了这个问题,但这真的有必要吗?那么jQuery移动的的意义是什么呢?$.mobile.ajaxEnabled = false
没有做任何事情。我还在Github上遇到了this discussion,并希望这个问题只发生在链接到非jQuery移动的页面时,但事实并非如此。
1条答案
按热度按时间20jt8wwn1#
这是jQuery移动的独有的。
首先,你错过了一个重要的信息,如果你只需要使用一个功能,永远不要把jQuery移动的和其他框架混合在一起。在这种情况下,你应该自定义jQuery移动的,只使用/构建需要的功能。找到它here。
在你的例子中,你使用的是完整的jQuery移动的框架,它将超过你的完整项目。jQuery移动的使用AJAX来处理页面管理,这意味着它会将页面加载到DOM中,以使它们尽可能流畅地运行。
当使用多个HTML模板时,只有第一个HTML文件完全加载到DOM中。当你打开另一个页面时,jQuery移动的会剥离HEAD,只加载带有data-role=“page”属性的div,因为你没有这样的div页面转换会失败。
当您禁用AJAXloading**data-aware =“false”**属性时,您将强制jQuery移动的使用经典的页面处理。
基本上只要遵循我的第一个建议,只使用您真正需要的功能来重建jQuery移动的。只有当你打算把jQuery移动的框架用作UI框架时,才使用它,永远不要使用它。
如果你需要更多的信息,请随时问我。