Can'；使用AJAX（jQuery Mobile）时不要使用Javascript_Javascript_Jquery_Ajax_Jquery Mobile

Can'；使用AJAX（jQuery Mobile）时不要使用Javascript

javascript jquery ajax jquery-mobile

Can'；使用AJAX（jQuery Mobile）时不要使用Javascript,javascript,jquery,ajax,jquery-mobile,Javascript,Jquery,Ajax,Jquery Mobile,我想在Jquery Mobile中使用Swiper Javascript Api（）。。但是由于Jquery Mobile使用ajax，我的javascript无法工作。。示例源是这样的 </head> <body> <div data-role="page"> <div data-role="header"> </div> <div role="main"> <!-- usin

我想在Jquery Mobile中使用Swiper Javascript Api（）。。但是由于Jquery Mobile使用ajax，我的javascript无法工作。。示例源是这样的

</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>

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>

</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

</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>


$（文档）.on（'pagecreate'，function（））{
var mySwiper=new Swiper（“.Swiper container”{
//您可以在此处选择：
模式：'水平'，
循环：正确
//等等。。
});  
})
1.
第1页
2.
第2页
3.
第3页

我在sub.html中使用了SwiperAPI（javascript）。但当我访问index.html页面并单击子链接时，子页面的SwiperAPI不起作用。当我刷新那个页面时，它就工作了。。

即使我不刷新Swiper api，如何查看它

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

jQuery Mobile使用AJAX加载新页面。但是，它会将头部以及容器外的任何东西从容器中取出，容器中有

data role=“page”

（或者

body

，如果没有提供的话）

</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>

解决方案是移动脚本，使其出现在jQueryMobile注入页面的页面部分中，从而不会被删除

</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>

然后，如果您想在$.ready（）上执行javascript，则需要绑定到这样的对象：

</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>

在现实世界中，我注意到，

pageinit

有时不能解决问题，所以如果其他方法都失败了，看看这是否奏效。

对于单页模型，JS库和代码应该放在page div中。将swiper JS库和代码移到sub.html的page div中。@Omar我移动了它。但是它不起作用..（）不要使用

.ready（）

，而是使用

$（文档）pageinit
在jQM 1.4中被弃用，并替换为pagecreate
。尝试pagecontainershow
而不是pagecreate
。它与pagecontainershow一起工作
</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>