jQuery Mobile断开链接.正确的用法是什么? [英] jQuery Mobile breaks links. What is the correct use?
问题描述
我将jQuery Mobile添加到我的项目中是因为我想通过滑动事件来触发Bootstrap轮播滚动.用一天左右的时间编码后，我注意到内部链接不再起作用. 我可以使用以下两个页面test1.html可靠地重现此内容:
I added jQuery Mobile to my project because I want swipe events to trigger Bootstrap carousel scrolls. After coding with it for a day or so I noticed that internal links no longer work. I can reproduce this reliably with the following two pages, 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:
and 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 Mobile时，它可以正常运行.
When I click the link, jQuery code will throw a handled exception that is swallowed, but the target page never loads in the browser. When I remove jQuery Mobile, it works in a normal way.
我已经看到此问题-添加data-ajax="false"似乎可以解决问题，但这真的有必要吗?那么jQuery Mobile的意义是什么?
I have seen this question - adding data-ajax="false" does seem to fix the issue, but is this really necessary? What's the point of jQuery Mobile then?
$.mobile.ajaxEnabled = false没有执行任何操作.我还在Github上遇到了此讨论，并希望这个问题只发生了链接到非jQuery Mobile页面时，但不会.
$.mobile.ajaxEnabled = false did not do anything. I also came across this discussion on Github and had hopes that the issue only happened when linking to non-jQuery Mobile pages, but it does not.
推荐答案
这是jQuery Mobile的独特功能.
This is something unique to jQuery Mobile.
首先，如果您只需要使用一种功能，那么您将丢失一个重要信息，不要将jQuery Mobile与其他框架混合使用.在这种情况下，您应该自定义jQuery Mobile并仅使用/构建所需的功能.在 此处 找到它.
First you are missing one big information, never mix jQuery Mobile with other frameworks, if you only need to use just one functionality. In that case you should customize jQuery Mobile and use/build only needed functionality. Find it here.
在您的情况下，您正在使用完整的jQuery Mobile框架，它将取代您的完整项目. jQuery Mobile使用 AJAX 处理页面管理，这意味着它将把页面加载到 DOM 中，以使页面尽可能平滑地运行.
In your case you are using full jQuery Mobile framework and it will overtake your complete project. jQuery Mobile uses AJAX to handle page management, which means it will load pages into the DOM to make them run as smooth as possible.
在使用多个 HTML 模板时，只有第一个 HTML 文件被完全加载到 DOM 中.当您打开另一个页面时，jQuery Mobile将删除 HEAD 并仅加载具有 data-role ="page" 属性的div，因为您没有这样的div页面转换将失败
When working with with multiple HTML template only first HTML file is fully loaded into the DOM. When you open another page jQuery Mobile will strip HEAD and load only div with data-role="page" attribute, because you don't have such div page transition will fail.
当您禁用 AJAX 加载 data-ajax ="false" 属性时，您将强制jQuery Mobile使用经典页面处理.
When you disable AJAX loading data-ajax="false" attribute you will force jQuery Mobile to use classic page handling.
基本上，请遵循我的第一个建议，并仅使用您真正需要的功能来重建jQuery Mobile.仅当您打算将其用作UI框架时才使用完整的jQuery Mobile框架，而永远不要使用.
Basically just follow my first advice and rebuild jQuery Mobile using only functionality you really need. Use full jQuery Mobile framework only if you intend to use it as UI framework and nothing else, never ever.
随时问我是否需要更多信息.
Feel free to ask me if you need more information.
这篇关于jQuery Mobile断开链接.正确的用法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
