Question

在这个项目中使用jquery和phonegap

我有一个链接，如果点击，则更改页面：

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

这个工作正常，但我希望在转换完成后运行一个函数（playMusic()），如下所示：

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

我发现在转换完成后，在显示的页面上会触发pageshow事件，但我不确定如何使用它

这似乎没有用，有什么想法吗？

由于

Answer 1

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

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, 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, 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>
</head> 
<body>
<div data-role="page" id="stats">
    <div data-role="content">some stats</div>
</div>
</body>
</html>

如何在$ .mobile.changePage在jquery中准备好后运行回调函数？

1 个答案:

HTML