javascript - 使用 AJAX (jQuery Mobile) 时无法使用 Javascript

我想在 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>

sub.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？

最佳答案

jQuery Mobile 使用 AJAX 加载您的新页面。但是，它会删除头部以及带有 data-role="page" 的容器外部的任何内容(如果未提供，则删除 body)。

解决方案是移动您的脚本，使其出现在 jQuery Mobile 注入(inject)页面的页面部分中，这样它就不会被删除。

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

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

在现实世界中，我注意到 pageinit 有时无法解决问题，因此如果其他方法都失败，try binding to pagebeforeshow看看是否有效。

关于javascript - 使用 AJAX (jQuery Mobile) 时无法使用 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21108078/

javascript - 使用 AJAX (jQuery Mobile) 时无法使用 Javascript

上一篇：javascript - clearInterval() 是如何工作的？

下一篇：javascript - 如何删除javascript中的空白框？