使用 AJAX (jQuery Mobile) 时无法使用 Javascript答案

【问题标题】：Can't use Javascript when using AJAX (jQuery Mobile)使用 AJAX (jQuery Mobile) 时无法使用 Javascript
【发布时间】：2014-01-14 07:31:35
【问题描述】：

我想在 Jquery Mobile 中使用 Swiper Javascript Api(http://www.idangero.us/).. 但是因为 Jquery Mobile 使用 ajax，所以我的 javascript 不起作用.. 示例来源就是这样。

index.html

<head>
<link href="./scripts/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/jquery-1.10.2.min.js"></script>
<script src="./scripts/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./scripts/idangerous.swiper.css"/>
<script src="./scripts/idangerous.swiper.2.4.1.js" defer="true"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header"></div>
    <div role="main" class="ui-content page_content"><a href="sub.html">go sub page</a></div>
    <div data-role="footer"></div>
</div>
</body>

子.html

</head>

<body>
<div data-role="page">
    <div data-role="header">
    </div>
    <div role="main">

    <!-- using swipe javascript source-->
<script defer="true">
$(document).on('pagecreate', function() {
  var mySwiper = new Swiper('.swiper-container',{
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });  
})
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--First Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black">1</font></center>
                <center><font color="black">page1</font></center>

            </div>
            <!--Second Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black" >2</font></center>
                <center><font color="black" >page2</font></center>

            </div>
            <!-- Third Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black">3</font></center>
                <center><font color="black">page3</font></center>

            </div>
        </div>
    </div>
    </div>
    </div data-role="footer"></div>
</div>
</body>

我在 sub.html 中使用了 Swiper api(javascript)。但是当我访问 index.html 页面并单击子链接时，子页面的 Swiper api 不起作用。当我刷新该页面时，它可以工作.. 即使我不刷新它，我如何查看 Swiper api？

【问题讨论】：

对于单页模型的JS库和代码应该放在page div里面。在 sub.html 的 page div 中移动 swiper JS 库和代码。
@Omar 我移动了它。但它不起作用..(mbtistudy.cafe24.com/index.html)
不要使用.ready()，而是使用$(document).on("pagecreate", function () { swipre code });。 pageinit 在 jQM 1.4 中已弃用，并替换为 pagecreate。
试试pagecontainershow 而不是pagecreate。
它适用于pagecontainershow jsfiddle.net/Palestinian/mH4YW

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

jQuery Mobile 使用 AJAX 加载新页面。但是，它会去除头部——以及带有data-role="page"（或body，如果未提供）的容器外的任何东西。

解决方案是移动您的脚本，使其出现在 jQuery Mobile 注入页面的页面部分中，因此不会被删除。

然后，如果你想在 $.ready() 上执行 javascript，你需要像这样绑定到jQuery Mobile's onPageInit event：

$( document ).on( "pageinit", function( event ) {
    alert( "This page was just enhanced by jQuery Mobile!" );
});

在现实世界中，我注意到pageinit 有时不能解决问题，所以如果其他方法都失败了，try binding to pagebeforeshow 看看是否能解决问题。

【讨论】：

【解决方案2】：

我的猜测是 document.ready 只触发一次 - 当您的页面最初加载并且 DOM 准备好时。您可以将代码直接放入加载的 sub.html 中的标记中。无需使用 $(document).ready 事件处理程序。

【讨论】：