Question

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

Answer 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并查看是否可以解决问题。

Answer 2

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

使用AJAX（jQuery Mobile）时无法使用Javascript

2 个答案: