javascript - 单击 anchor 标记后，jQuery Mobile 不会移动到下一页

Question

我正在使用 jQuery 移动框架来实现移动网站。但是当我点击一个 anchor 标签时，页面将无法正确加载，并且会出现一个空白的白色页面，如屏幕截图所示。

jQuery 和 jQuery Mobile 脚本标签:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

我的 JSP 页面:

<a href="<c:url value="/${cityName}/cakes/c/4"/>">
    <img class="img-responsive center-block" src="/sf/assets/img/app/city-home/cake.jpg" alt="cakes" > 
</a>

点击 anchor 标签后，控制进入 Controller (Java)，然后 Controller 返回一个JSP页面；但是，显示一个空白页。如果我重新加载页面，则数据会正确显示。

以下行使控件转到 m-category-page:

return "/catalog/m-category-products";

但是第一次这个页面没有任何内容，但是，重新加载页面后，内容加载了。单击 anchor 标记后，下一页应显示所有数据。

Answer 1

默认情况下，jQuery Mobile增强了所有链接标签，使它们通过ajax加载页面；因此，减少页面加载时间并“提高性能”。参见 This .

ajaxEnabled boolean, default: true
jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, URL hash listening will be disabled as well, and URLs will load as ordinary HTTP requests.

您可以通过向您的链接添加 data-ajax="false" 属性来为单个标签 禁用此 ajax 增强功能。您也可以像这样全局完全禁用它:

$(document).on("mobileinit", function() {  
    $.mobile.ajaxEnabled = false;
});