我正在设计一个JQuery Mobile应用程序并面临一个问题，
我有两个页面page1.aspx和page2.aspx，我必须从page1重定向到page2。目前我正在使用window.location.href进行重定向，但它也是在地址栏中显示加载。
为了避免这种情况，我想使用$.mobile.changePage。
问题：
现在在重定向之前，我在localStorage变量中设置了一个值，基于page2.aspx的加载事件上的这个值，我必须绑定页面。它与window.location.href一起正常工作，但在使用$.mobile.changePage时，它会重定向，但如果我正在刷新正在加载的页面，则在来到page2.aspx后，加载事件不会触发。
所以我的问题是在显示page2.aspx加载事件时必须触发。
有人可以告诉我使用page2.aspx时未加载$.mobile.changePage的原因吗？
如果有人知道解决方案，请尽快回复，非常紧急。
提前致谢。
Page1.aspx的：
localStorage.setItem("pageCode", "NULLException");
//$.mobile.changePage("../MessageDialog.aspx", "slide", true, true);
$.mobile.changePage("../MessageDialog.aspx", { transition: "slide", changeHash: true, reverse: false });
Page2.aspx：
$('div').live("pageshow", function () {
if (localStorage.getItem("pageCode") != null) {
if (localStorage.getItem("pageCode") == "NullException") {
$('#lblDialogHeader').text("Error");
$('#lblDialogMessage').text("Sorry");
document.getElementById("btnOK").setAttribute("onclick", 'Test()');
}
}
}
HTML
<div data-theme="c" data-role="page" id="test">
<div data-role="header" data-theme="b">
<h1><label id="lblStatus">Status</label></h1>
</div>
<div data-role="content" data-theme="b">
<h3><label id="lblDialogHeader"></label></h3>
<p><label id="lblDialogMessage"></label></p>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<a href="#" data-role="button" id="btnOK" data-icon="check">OK</a>
<a href="#" data-role="button" id="btnCancel" data-rel="back" data-icon="delete" >Cancel</a>
</ul>
</div>
</div>
</div>
答案 0 :(得分：3)
似乎当您致电changepage指定过渡时，第二页似乎会“注入”第一页。您可以轻松检查，因为$(document).ready(function(){})在第二页中不起作用。
我在 Windows Phone 7 应用程序中使用 Cordova ，我将脚本location.href更改为使用$.mobile.changepage()，并且出现此问题：我想要第二个页面来触发任何加载事件，但没有一个工作（pageshow，pagechange，pagebeforechange，正文onload，$(document).ready等等。
到目前为止，我的调查结果可能对您和其他人有所帮助：
index.html 是我的首页，如下所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function callSecondPage() {
//save my scroll position in index page
var top = $(window).scrollTop();
window.sessionStorage.setItem('top', top);
//go to the second page
$.mobile.changePage("secondpage.html", { transition: "slide", changeHash: true, reloadPage :true });
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.min.css" />
</head>
<body onload="onLoad()">
<div class="my-page" data-role="page" data-title="My App Title" data-theme="a">
<div class="header" data-role="header">
<img src="img/title.png" />
</div><!-- /header -->
<div data-role="content">
<div class="my-logo">
<img src="img/logo.png"/>
</div>
<div class="my-content">
some stuff here
<a href="#" onclick="callSecondPage()">Call second page</a>
</div>
</div>
</body>
</html>
现在正在运行 secondpage.html 。了解无法使用pagechange或$(document).ready，我们注意到我们可以使用pageinit来模拟“页面加载”。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
//LOL! this does not work using $.mobile.changepage as caller
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
//LOL! this will never run using $.mobile.changepage as caller
// Now safe to use the Cordova API
var top = sessionStorage.getItem('top');
}
</script>
</head>
<body onload="onLoad()">
<div class="my-second-page" data-role="page" data-title="App Title" data-theme="b">
<script type="text/javascript">
$(".my-second-page").live('pageinit', function () {
//LOL! Hey this WORKS! I can see an output in Visual Studio!
console.log('************************* pageinit');
console.log('************************* '+ sessionStorage.getItem('top'));
});
$(".my-second-page").live('pagechange', function () {
//LOL! Again, this is not going to work, well, it does not print an output in Visual Studio!
console.log('************************* pagechange');
console.log('************************* ' + sessionStorage.getItem('top'));
});
</script>
<div data-role="header">
<h1>App title</h1>
</div><!-- /header -->
<div data-role="content">
<div class="my-content">
your stuff here for second page
</div>
<p>
<a href="index.html" data-role="button" data-theme="b" data-transition="flip" rel="external" data-icon="back" data-iconpos="left" data-inline="true">Back</a>
</p>
</div>
<div data-role="footer" class="ui-footer" data-position="fixed">
<h1>My footer</h1>
</div>
</div>
</body>
</html>
这是一个真实的工作样本，如果有人需要，我可以共享一个示例项目。
答案 1 :(得分：0)
事件与changePage不同，因为该方法对新url进行Ajax调用，这与window.location.href中的直接调用不同
您是否尝试过这种方法：
$('div').live("pageshow", function()
{
//your code
});
编辑：看看JQuery Mobile页面，我看到页面更改后触发了事件和事件。