Похоже, что когда вы вызываете changepage, указав переход, вторая страница, кажется, "вставлена" в первую.Вы можете легко проверить это, потому что $(document).ready(function(){}) не работает на второй странице.
Я использую Cordova в приложении Windows Phone 7 , я изменил свой скрипт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>
Это настоящий рабочий пример, если кому-то понадобится, я могуподелиться примером проекта.