Javascript 在jquery中$.mobile.changePage就绪后，如何运行回调函数？_Javascript_Jquery_Jquery Mobile_Cordova

Javascript 在jquery中$.mobile.changePage就绪后，如何运行回调函数？

javascript jquery jquery-mobile cordova

Javascript 在jquery中$.mobile.changePage就绪后，如何运行回调函数？,javascript,jquery,jquery-mobile,cordova,Javascript,Jquery,Jquery Mobile,Cordova,在这个项目中，我使用jquery和phonegap 我有一个链接，如果单击，会更改页面： $('#statsButtonmain').on('click', function() { $.mobile.changePage("stats.html", { transition: "slideup"}, true, true); }); 这很好，但我想在转换完成后运行一个函数（playMusic（）），如下所示： $('#statsButtonmain').on('click

在这个项目中，我使用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

事件在页面转换完成后被触发，但我不知道如何使用它

这似乎不起作用，有什么想法吗

谢谢

我没有做太多jQuery移动开发，所以这可能不是最有效的解决方案。正如您所说，您需要使用

pageshow

事件。下面是我在本地运行的两个HTML文件，在

stats.HTML

页面转换完成后，我在其中看到了警报。

.live（）

绑定到

#stats

元素的页面

pageshow

事件

HTML （另存为index.html）


家
$（文档）.ready（函数（）{
$（'statsButtonmain'）。在（'click'，function（）上{
$.mobile.changePage（'stats.html'，{transition:'slideup'，true，true）；
});
$（'#stats'）.live（'pageshow'，函数（事件，ui）{
播放音乐（）；
});
函数playMusic（）{
警报（“播放音乐”）；
}
});
回调测试

（另存为stats.html）


统计数据
一些统计数据

如果我有一个script.js，并且我想将代码移到那里，那会干扰吗？如果脚本位于外部文件中，它仍然可以工作。我只是在本地尝试过：-）它应该也能用，但我并没有这样尝试过。还有一件事。在我的例子中，我有一个

index.html

页面加载后，它会转到

test.html

，在该页面上我有一个指向

stats.html

的链接。在这种情况下，我是否必须将js放在script.js文件中的ill leave In的

test

页面中，并将该文件添加到

test.html

？向所有人发出警告：

live

已被弃用，并已从jQuery 1.9中删除。我建议使用

delegate

或

on

。有关详细信息，请参阅。

pageshow

在1.4.0中不推荐使用，使用

pagecontainershow

就像如何更改页面一样，需要使用

$（“：mobile pagecontainer”）.pagecontainer（“更改”，“页面ID”，“转换：{none'）而不是changePage方法
<!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>

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