如何在$ .mobile.changePage在jquery中准备好后运行一个回调函数? [英] how to run a callback function after $.mobile.changePage is ready in jquery?
问题描述
在此项目中使用jquery和phonegap
in this project im using jquery and phonegap
我有一个链接,如果点击,更改页面:
i have a link that if clicked , changes the page:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
});
这很好,但我想运行一个函数( playMusic )
),如下所示:
this works fine, but i would like to run a function (playMusic()
) when the transition is done, something like this:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
playMusic();
});
我发现有一个 pageshow
这似乎不起作用,任何想法?
this doesn't seem to work, any ideas?
感谢
推荐答案
开发,因此这可能不是最有效的解决方案。正如你所说, pagehow
事件是你需要使用的。这里是我在本地运行的2个HTML文件,其中在 stats.html
页面转换完成后看到警报。 .live()
绑定到 #stats
元素的页面 pageshow
event。
I've not done a lot a jQuery mobile development so this might not be the most efficient solution. As you said, the pageshow
event is what you need to use. Here are the 2 HTML files I ran locally in which I see the alert after the stats.html
page transition is completed. The .live()
is bound to the #stats
element's page pageshow
event.
(另存为index.html)
(saved as 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)
(saved as 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中准备好后运行一个回调函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!