jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 如何在$.mobile.changePage在jquery中准备好后运行回调函数?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在这项目中我使用 jquery和phonegap

我有一个链接,如果点击,更改页面

$('#statsButtonmain').on('click',function() {
        $.mobile.changePage("stats.html",{ transition: "slideup"},true,truE);  
});

这工作正常,但我想在转换完成后运行一个函数(playmusic()),如下所示:

$('#statsButtonmain').on('click',truE);  
            playmusic();
});

我发现有一个pageshow事件在转换完成后在显示页面上被触发,但我不知道如何使用它

这似乎不起作用,任何想法?

谢谢

解决方法

我没有做过很多jQuery移动开发,所以这可能不是最有效的解决方案.正如您所说,pageshow事件是您需要使用的.以下是我在本地运行的2个HTML文件,其中我在stats.html页面转换完成后看到警报. .live()绑定到#stats元素的pagepageshow事件.

HTML

(另存为index.html)

<!doctype html> 
<html> 
  <head> 
    <title>Home</title> 
    <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#statsButtonmain').on('click',function() {
           $.mobile.changePage('stats.html',{ transition: 'slideup'},truE);  
        });

        $('#stats').live('pageshow',function(event,ui) {
          playmusic();
        });

        function playmusic() {
          alert('playing music');
        }
    });
    </script>
</head> 
<body>
<div data-role="page" id="home">
    <div data-role="header">
       <h1>CallBACk test</h1>
    </div>
    <div data-role="content">
      <a href="#" id="statsButtonmain">click me</a>
    </div>
</div>
</body>
</html>

(另存为stats.html)

<!doctype html> 
<html> 
  <head> 
    <title>Stats</title> 
    <Meta name="viewport" content="width=device-width,user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
</head> 
<body>
<div data-role="page" id="stats">
    <div data-role="content">some stats</div>
</div>
</body>
</html>

大佬总结

以上是大佬教程为你收集整理的javascript – 如何在$.mobile.changePage在jquery中准备好后运行回调函数?全部内容,希望文章能够帮你解决javascript – 如何在$.mobile.changePage在jquery中准备好后运行回调函数?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。