jQuery Mobile打破了链接.什么是正确的用法?

cdo*_*ner 5 jquery hyperlink jquery-mobile

我在项目中添加了jQuery Mobile,因为我希望滑动事件触发Bootstrap轮播滚动.用它编码一天左右后,我注意到内部链接不再有效.我可以通过以下两页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>
Run Code Online (Sandbox Code Playgroud)

和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>
Run Code Online (Sandbox Code Playgroud)

当我单击链接时,jQuery代码将抛出一个被吞下的处理异常,但目标页面永远不会在浏览器中加载.当我删除jQuery Mobile时,它以正常方式工作.

我已经看到了这个问题 - 添加data-ajax="false"似乎解决了这个问题,但这是否真的有必要?那么jQuery Mobile有什么意义呢?

$.mobile.ajaxEnabled = false什么也没做 我也遇到过关于Github的讨论,并希望这个问题只在链接到非jQuery Mobile页面时发生,但事实并非如此.

Gaj*_*res 9

这是jQuery Mobile独有的东西.

首先,如果您只需要使用一个功能,那么您将缺少一个重要信息,从不将jQuery Mobile与其他框架混合在一起.在这种情况下,您应该自定义jQuery Mobile并使用/ build仅需要的功能.在这里找到它.

在您的情况下,您使用完整的jQuery Mobile框架,它将超越您的整个项目.jQuery Mobile使用AJAX来处理页面管理,这意味着它会将页面加载到DOM中,以使它们尽可能顺畅地运行.

使用多个HTML模板时,只有第一个HTML文件完全加载到DOM中.当你打开另一个页面时,jQuery Mobile将剥离HEAD并仅加载具有data-role ="page"属性的div,因为你没有这样的div页面转换会失败.

当您禁用AJAX加载数据-ajax ="false"属性时,您将强制jQuery Mobile使用经典页面处理.

基本上只需遵循我的第一个建议,并使用您真正需要的功能重建jQuery Mobile.只有当你打算将它用作UI框架而没有别的东西时,才使用完整的jQuery Mobile框架.

如果您需要更多信息,请随时问我.