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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
浅谈js中的bind
Mar 18 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php表单处理操作
2017/11/16 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python字符串中的单双引
2017/02/16 Python
Python微信公众号开发平台
2018/01/25 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
捐书寄语赠言
2014/01/18 职场文书
九年级历史教学反思
2014/01/27 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python