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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
js取整数、取余数的方法
May 11 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
ztree实现权限横向显示功能
May 20 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
vue实现记事本功能
Jun 26 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
轻松修复Discuz!数据库
2008/05/03 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
js 提交和设置表单的值
2008/12/19 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
js 省地市级联选择
2010/02/07 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python 正则表达式操作指南
2009/05/04 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
英语商务邀请函范文
2014/01/16 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
通知范文怎么写
2015/04/16 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
Nginx报404错误的详细解决方法
2022/07/23 Servers