Question

我在项目中添加了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>

和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时，它以正常方式工作。

我看过this question - 添加data-ajax="false"似乎确实解决了这个问题，但这真的有必要吗？那么jQuery Mobile的重点是什么？

$.mobile.ajaxEnabled = false没有做任何事情。我在Github上也遇到了this discussion，并希望这个问题只在链接到非jQuery Mobile页面时发生，但事实并非如此。

Answer 1

这是jQuery Mobile独有的东西。

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

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

使用多个 HTML 模板时，只有第一个 HTML 文件已完全加载到 DOM 中。当您打开另一个页面时，jQuery Mobile将剥离 HEAD 并仅加载带有 data-role =＆＃34; page＆＃34; 属性的div，因为您不会有这样的div页面转换会失败。

当您停用 AJAX 加载 data-ajax =＆＃34; false＆＃34; 属性时，您将强制jQuery Mobile使用经典页面处理。

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

如果您需要更多信息，请随时问我。

jQuery Mobile打破了链接。什么是正确的用法？

1 个答案: