Jquery Mobile 中绑定页面事件及页面生命周期

最新推荐文章于 2023-04-27 19:24:26 发布

iteye_3142

最新推荐文章于 2023-04-27 19:24:26 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery mobile 文章标签： jquery mobile event 生命周期 page html

本文链接：https://blog.youkuaiyun.com/iteye_3142/article/details/82545757

jquery mobile 专栏收录该内容

5 篇文章

订阅专栏

本文介绍JQuery Mobile中事件绑定的新旧方法，并通过实例演示页面生命周期中的各种事件触发顺序，包括页面创建、初始化、显示及隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于JQuery Mobile中的事件绑定

原来的写法是
选择器 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>