详解jQuery向动态生成的内容添加事件响应jQuery live()方法


Posted in Javascript onNovember 02, 2015

jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:

<body> 
<div class="clickme">Click here</div> 
</body>

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() { alert(3water.com); });

 当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
$('.clickme').live('click', function() { alert("3water.com"); });

这样点击新增的元素,它依然能够触发事件处理函数。
事件委托
live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
在我们的例子中,当点击新的元素后,会依次发生下列步骤:
1、生成一个click事件传递给 <div> 来处理。
2、由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上。
3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live() 绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。
6、这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
7、如果找到了匹配的元素,那么调用原始的事件处理函数。
8、由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。
以上就是对jQuery向动态生成的内容添加事件响应jQuery live()方法的详细介绍,希望对大家的学习有所帮助。
Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
浅析JavaScript动画
Jun 10 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
You might like
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
深入理解Node module模块
2018/03/26 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
领导证婚人证婚词
2014/01/13 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
小学六年级学生评语
2014/04/22 职场文书
倡议书范文格式
2014/05/12 职场文书
建筑工地质量标语
2014/06/12 职场文书
考察邀请函范文
2015/01/31 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
详解JAVA的控制语句
2021/11/11 Java/Android
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL