javascript 在 $.mobile.changePage 在 jquery 中准备好后如何运行回调函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9326177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to run a callback function after $.mobile.changePage is ready in jquery?
提问by Patrioticcow
in this project im using jquery and phonegap
在这个项目中，我使用 jquery 和 phonegap
i have a link that if clicked , changes the page:
我有一个链接，如果点击，会更改页面：
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
});
this works fine, but i would like to run a function (playMusic()) when the transition is done, something like this:
这工作正常，但我想playMusic()在转换完成后运行一个函数 ( )，如下所示：
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
playMusic();
});
i found out that there is a pageshowevent that gets triggered on the page being shown, after its transition completes, but im not sure how to use it
我发现有一个pageshow事件在显示的页面上触发，在其转换完成后，但我不知道如何使用它
this doesn't seem to work, any ideas?
这似乎不起作用，有什么想法吗？
Thanks
谢谢
采纳答案by andyb
I've not done a lot a jQuery mobile development so this might not be the most efficient solution. As you said, the pageshowevent is what you need to use. Here are the 2 HTML files I ran locally in which I see the alert after the stats.htmlpage transition is completed. The .live()is bound to the #statselement's page pageshowevent.
我没有做过很多 jQuery 移动开发，所以这可能不是最有效的解决方案。正如你所说，pageshow事件是你需要使用的。这是我在本地运行的 2 个 HTML 文件，在stats.html页面转换完成后我会在其中看到警报。将.live()被绑定到#stats元素的页面pageshow事件。
HTML
HTML
(saved as index.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>
(saved as stats.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>
