gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 17:54:10 25 4
gpt4 key购买 nike

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

  1. 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>
  2. 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com