$.mobile.changePage 在 jquery 中准备好后如何运行回调函数？
[英]how to run a callback function after $.mobile.changePage is ready in jquery?
问题描述
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);
});
2 个解决方案
解决方案1
4 已采纳 2012-02-17 10:35:14
I've not done a lot a jQuery mobile development so this might not be the most efficient solution. 我没有做过很多jQuery移动开发，所以这可能不是最有效的解决方案。 As you said, the pageshow event is what you need to use. 正如您所说， pageshow事件是您需要使用的。 Here are the 2 HTML files I ran locally in which I see the alert after the stats.html page transition is completed. 以下是我在本地运行的2个HTML文件，其中我在stats.html页面转换完成后看到警报。 The .live() is bound to the #stats element's page pageshow event. .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>
解决方案2
0 2022-02-04 14:46:11
async function loadPage(_url) {
let promise = new Promise((resolve) => {
$.mobile.changePage(_url);
var currentPage;
function checkCurrentPage() {
currentPage = $("body").pagecontainer("getActivePage");
if (currentPage[0].baseURI.includes(_url)) {
clearInterval(loadPageInt);
resolve();
}
}
var loadPageInt = setInterval(function () {
checkCurrentPage();
}, 100);
});
return await promise;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.