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