jQuery的.live()和.die() 使用介绍


Posted in Javascript onSeptember 10, 2011

什么是 .live()
.live方法类似于.bind(),除此之外,它允许你将事件绑定到DOM元素上,可以将事件绑定到DOM中还不存在的元素上,看看下面的例子:

比方说当用户在点击链接时及想提示他们正在离开站点。

$(document).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

注意,.click()仅仅是个实现更一般.bind()的简单方法,下面和上面的代码相当于上面的实现。
$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

但是现在通过javascript添加一个链接到页面。
$('body').append('<div><a href="...">Check it out!</a></div>');

然而当用户点击那个链接是,方法将不会被调用,因为那个链接当你将click事件绑定到页面的所有<a>节点时还并不存在,所以我们就用.live()替换.bind():
$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

现在如果你添加一个新的链接到页面上,绑定就也可以运行了。

.live() 如何工作
.live()背后神奇的地方就在于它并不将事件绑定到你选定的elements上,而实际上是绑定到了DOM树的跟节点(例子中是$(document)),而是在element中就像一个参数一样进行传递。

那么当你点击一个元素时,click事件就会在DOM树上往上传递,直至到达根节点。这个.click()事件的触发器已经在根节点被.live()创建。这个触发方法将首先检测被点击的目标看是否和.live()调用的选择器相匹配。所以上面的例子中,会检查点击的元素是否和$('a').live()中的$('a')相匹配,如果匹配,那么绑定的方法就会执行了。

因为不管你在根节点内点击了什么,根节点的.click()事件都会被触发,当你点击加入到根节点的任何元素时这个检查都会发生。

所有.live() 都可以.die()
如果你知道.bind(),那么你肯定知道.unbind()。那么,.die()和.live()就是类似的关系了。为了接触上面的绑定(不希望用户点击链接时弹出对话框),我们这么做:

$('a').die();

更具体点,如果还有其他的事件被绑定且需要保留,例如hover或其他,可以只解除click事件绑定。

$('a').die('click');

再具体些,如果已经定义了方法名,可以解除绑定指定的方法。

specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert );

关于 .die()的问题
使用这些函数时,.die()方法会有一个缺点。只可以使用.live()方法中用到的元素选择器,例如,不可以像下面这样写:
$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die();

.die()事件看起来好像是匹配到了目标选择权并解除了.live()的绑定,但事实上,$('a.no-alert')并不存在绑定,所以jquery找不到任何绑定去去掉,就不会起作用了。
更糟的是下面这个:
$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die();

如何修复 .die()

在我下篇文章中,我将会建议一种.die()执行的新方法,它可以提供一个向后兼容的语气的行为。或许我有时间的话会去建议jQuery核心开发团队在下一个release中接受我的建议并进行修改,希望多一点我刚写的这些方法,包括可选的context参数,允许自定义事件附加的节点,而不是根节点。

如果想得到更多的信息和例子,可以查查jQuery .live() and .die().的文档

同时注意下 .delegate() 和.undelegate(),他们可以替代.live()和.die(),它们联系很紧密。

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
js实现多图左右切换功能
Aug 04 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
简单谈谈json跨域
2016/03/13 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
React 组件间的通信示例
2018/06/14 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python 切片和range()用法说明
2013/03/24 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python操作json的方法实例分析
2018/12/06 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
元旦晚会主持词
2014/03/24 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书