对于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的事件可以分为两类：页面生命周期事件和用户交互事件。页面生命周期事件主要与页面加载、初始化、显示和隐藏等过程相关，而用户交互事件则涉及用户与页面元素的互动。 1. 页面生命周期事件： - `...
在源代码中，我们可以研究这部分逻辑，了解如何有效地管理页面生命周期和数据绑定。 此外，jQuery Mobile 的事件处理是其另一大亮点。它扩展了jQuery的事件系统，添加了许多针对移动设备的特定事件，如 `touchstart...
- 事件处理：如pageinit、pagebeforechange、pagechange等，帮助开发者在页面生命周期的不同阶段执行特定操作。 - API函数：如$.mobile.changePage()用于实现页面间的切换，$.mobile.loading()控制加载指示器的显示...
首先，我们需要理解 jQuery Mobile 的基本结构和页面生命周期。jQuery Mobile 使用数据属性（data-attributes）和链接（links）来实现页面间的导航和组件的初始化。当页面加载或被激活时，jQuery Mobile 自动应用...
同时，还有 `pagecreate`, `pagebeforechange` 等页面生命周期相关的事件，可用于在特定阶段执行代码。此外，还有 `enhanceWithin()` 和 `pageContainer()` 等方法，用于元素的增强和页面管理。 7. **可扩展性**：...
jQuery Mobile 提供了丰富的事件处理，如 `pagecreate`、`pageshow`、`pagebeforechange` 等，可以帮助我们监听页面生命周期和用户交互。例如，当用户选择餐厅类型后，我们可以绑定 `change` 事件来更新列表： ```...
1. **事件**：如 `pageinit`、`pageshow`、`pagebeforechange` 等，用于监听页面生命周期中的关键事件。 2. **方法**：如 `$.mobile.changePage()` 用于手动切换页面，`$.mobile.pageContainer.pagecontainer('...
4. **事件与监听**：书中会介绍jQuery Mobile特有的事件，如pageinit、pageshow、pagehide等，这些事件在页面生命周期的不同阶段触发，帮助开发者进行相应的逻辑处理。 5. **UI组件**：jQuery Mobile提供了丰富的UI...
检查并修正页面生命周期事件的绑定，确保它们在正确的时间触发。 5. **组件兼容性**：jQuery Mobile包含多种可交互的组件，如按钮、表单、下拉菜单等。升级后，这些组件的行为或外观可能发生变化。逐一测试每个组件...
jQuery Mobile定义了一系列与页面生命周期和用户交互相关的事件，如`pagecreate`、`pageshow`、`pagehide`等。同时，框架还提供了丰富的API接口，如`$.mobile.changePage()`用于程序化导航，`$.mobile.activePage`...
jQuery Mobile 提供了一系列与触摸和页面生命周期相关的事件，如 `pagecreate`、`pageshow`、`pagebeforechange` 等。这些事件可以帮助开发者在特定时刻执行代码，比如在页面加载完成后初始化组件或执行数据绑定。 ...
2. 查看事件绑定和回调函数，了解如何在页面生命周期中插入自定义代码。 3. 实践组件使用，如按钮、表单和网格布局，熟悉其配置和功能。 4. 优化性能，对比未优化前后的加载速度和用户体验。 总之，"jquery-mobile...
3. **页面初始化与事件**：理解`pagecreate`、`pageshow`、`pagebeforechange`等页面生命周期事件，有助于在正确的时间点进行DOM操作和事件绑定。 **四、jQuery Mobile 进阶应用** 1. **动态添加内容**：在运行时...
除了以上的基本事件，jQuery Mobile还提供了页面生命周期事件，如`pageinit`、`pagebeforechange`、`pagechange`等，这些事件在页面加载、切换时触发，方便我们进行动态内容的初始化和更新。 在使用jQuery Mobile...
jQuery Mobile 的核心特性之一是它提供了一系列专为移动环境设计的事件，这些事件可以帮助开发者更方便地处理用户的交互和页面生命周期的变化。以下是对这些事件的详细说明： 1. **hashchange**：当浏览器的哈希值...
**jQuery Mobile 知识点详解** jQuery Mobile 是一个基于 jQuery 库的轻量级、...在实际项目中，结合官网文档和示例代码（如压缩包中的z_jqueryMobile文件）进行学习和实践，将有助于更好地掌握这一强大的前端工具。
- **页面事件**：jQuery Mobile 提供了丰富的页面生命周期事件，如 `pagebeforeshow`、`pageshow`、`pagebeforehide` 和 `pagehide` 等，这些事件可以帮助开发者实现页面之间的过渡效果、清理资源等功能。...
jQuery Mobile 的 API 包括了页面生命周期事件、动画方法和实用工具函数。例如： - 页面生命周期事件：`pageinit`、`pageshow`、`pagebeforechange` 等，帮助开发者在页面加载或切换时执行代码。 - 动画方法：如 `...
8. 事件（Events）：如pagebeforechange、pageshow和pagehide等，用于监听和处理页面生命周期中的关键事件。 9. 插件（Plugins）：扩展了框架的功能，如日期选择器（date picker）、弹出框（popup）和滑块（slider）...
需要注意的是，这两种事件在页面的生命周期中只触发一次，它们与页面在显示或隐藏时触发的show/hide事件是不同的。 页面加载事件则包括`pagebeforeload`和`pageload`两种类型。`pagebeforeload`事件在页面开始加载...