Jquery Mobile 中绑定页面事件及页面生命周期
对于JQuery Mobile中的事件绑定
原来的写法是
选择器 on(事件名，调用函数）｛
｝
如：
而在新的JQM中
采用了新的写法，老的写法已经不好用了
另外，关于live 和 on方法，在JQuery 1.9版本以后，已经移除了live方法，而采用on方法来监听事件，用off方法来删除对事件的监听。
另外，对于页面的生命周期来说
顺序依次为
page1 pagecreate
page1 pageinit
page1 pageshow
$(function())
$(document).ready
$(window).load
(点击跳转页面)
page2 $(document).ready
page2 pagecreate
page2 pageinit
page1 pagehide
page2 pageshow
可用如下例子来做验证
MainPage.html
page1.html
page2.html
原来的写法是
选择器 on(事件名，调用函数）｛
｝
如：
$("#page2").on("pagecreate",function(event,data) {
console.log("pagecreate event");
});
而在新的JQM中
采用了新的写法，老的写法已经不好用了
$(document).on("pagecreate", "#page2", function( event,data ) {
console.log("pagecreate event");
});
另外，关于live 和 on方法，在JQuery 1.9版本以后，已经移除了live方法，而采用on方法来监听事件，用off方法来删除对事件的监听。
另外，对于页面的生命周期来说
顺序依次为
page1 pagecreate
page1 pageinit
page1 pageshow
$(function())
$(document).ready
$(window).load
(点击跳转页面)
page2 $(document).ready
page2 pagecreate
page2 pageinit
page1 pagehide
page2 pageshow
可用如下例子来做验证
MainPage.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript">
console.log("this is javascript");
$(function() {
console.log("function!");
}
);
$(document).ready(function() {
console.log("ready");
});
$(window).load(function () {
console.log("load");
});
/*---------------------------------------------*/
$(document).ready(function(event,data) {
console.log("#page1 --------------- document ready event");
});
/*---------------------------------------------*/
$(document).on("pagecreate", "#mainPage", function( event,data ) {
console.log("#mainPage --------------- pagecreate event");
});
$(document).on("pageinit", "#mainPage", function( event,data ) {
console.log("#mainPage --------------- pageinit event");
});
$(document).on("pageshow", "#mainPage", function( event,data ) {
console.log("#mainPage --------------- pageshow event");
});
$(document).on("pagehide", "#mainPage", function( event,data ) {
console.log("#mainPage --------------- pagehide event");
});
/*---------------------------------------------*/
$(document).on("pagecreate", "#page1", function( event,data ) {
console.log("#page1 --------------- pagecreate event");
});
$(document).on("pageinit", "#page1", function( event,data ) {
console.log("#page1 --------------- pageinit event");
});
$(document).on("pageshow", "#page1", function( event,data ) {
console.log("#page1 --------------- pageshow event");
});
$(document).on("pagehide", "#page1", function( event,data ) {
console.log("#page1 --------------- pagehide event");
});
/*-----------------------------------------------------------*/
$(document).on("pagecreate", "#page2", function( event,data ) {
console.log("#page2 --------------- pagecreate event");
});
$(document).on("pageinit", "#page2", function( event,data ) {
console.log("#page2 --------------- pageinit event");
});
$(document).on("pageshow", "#page2", function( event,data ) {
console.log("#page2 --------------- pageshow event");
});
$(document).on("pagehide", "#page2", function( event,data ) {
console.log("#page2 --------------- pagehide event");
});
</script>
</head>
<body>
<div data-role="page" id="mainPage" >
<p>
mainpage
</p>
<a href="./page1.html" data-transition="slide">link to page1</a>
<br>
<a href="./page2.html" data-transition="slide">link to page2</a>
</div>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div id="page1" data-role="page" >
<script type="text/javascript">
$(document).ready(function(event,data) {
console.log("#page1 --------------- document ready event");
});
</script>
<p>
page1;
</p>
<a href="mainPage.html" data-rel="back" data-transition="slide">link to mainPage</a>
<br>
<a href="page2.html" data-transition="slide">link to page2</a>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-url="aaa=123">
<script type="text/javascript">
$(document).ready(function(event,data) {
console.log("#page2 --------------- document ready event");
});
</script>
<p>
page2;
</p>
<a href="#" data-transition="slide">link test</a>
</div>
</body>
</html>