Question

我在使用jQuery Mobile时遇到了问题。

我在Index.html的<head>中包含了所有必要的内容

<link rel="stylesheet" href="css/standard.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.3.css" />
<link rel="stylesheet" href="css/idangerous.swiper.css" />
<script type="text/javascript" src="scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="scripts/idangerous.swiper.min.js"></script>

我在另一页上使用Swiper.js。但我知道jQuery Mobile使用Ajax加载只能替换后续页面中的<div data-role="page">，所以理想情况下，head和这些js文件应保持不变，但它不起作用。但是，Index.html工作正常。

我是否误解了只替换<div data-role="page">内的内容的Ajax加载概念？感谢。

Answer 1

我猜你正在使用mobile.loadPage()来加载你的新内容而你遇到了问题，因为容器或脚本都在“reloaded”元素中。

所以我建议使用done来执行该脚本，如下所示：

    $.mobile.loadPage("page.html", true).done(function (e, ui, page) {
          var mySwiper = $('.swiper-container').swiper({
                  //Your options here: mode:'horizontal', loop: true //etc.. 
          });
    })

使用jQuery Mobile时加载Ajax的麻烦

1 个答案: