对于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>
分享到：
相关推荐
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 ...4.通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。
jQuery_Mobile中文手册
jquery mobile中文手册，详细介绍了jquery mobile的相关知识。
用jquerymobile开发时，两个页面间跳转往往需要传递参数，此文档是代码示例
本资源以Hello Word为例，里面包含了jQuery Mobile框架所需要的部署文件。
《响应式网页开发实战》教学课件10jQuery Mobile邮件及事件.pdf《响应式网页开发实战》教学课件10jQuery Mobile邮件及事件.pdf《响应式网页开发实战》教学课件10jQuery Mobile邮件及事件.pdf《响应式网页开发实战》...
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。...
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery mobile相册的一种样式
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
原书名：jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社： Addison-Wesley Professional 作者： (荷)Adriaan de Jonge (美)Phil Dutson 译者： 包勇明 程学彬 出版社：人民邮电出版社 ...
通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作...
jQueryMobile 1.0.6开发Api jQueryMobile 配置 jQueryMobile 事件
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框
资源名称：jQuery Mobile参考手册 中文CHM版 内容简介：jQuery Mobile 是一个用于创建移动端web应用的的前端框架。jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。jQuery Mobile 工作与所有主流的智能...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者，可以从中学习JQuery Mobile的所有接口与组件的功能，同时通过范例进行练习；对于JQuery Mobile开发人员...
jQuery Mobile 1.0现已支持当前大部分的主流桌面、智能手机、平板设备及电子阅读平台，包括iOS、Android、WP7、Blackberry、Plam WebOS、Meego、Kindle 3和Fire等，而且还支持一些功能手机和早些版本的浏览器。...
作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...