【jQuery】为动态生成的元素添加时间监听
来源:互联网 发布:钓鱼 知乎 编辑:程序博客网 时间:2024/05/18 03:47
一、 $. live () 方法
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
返回值:jQuery live(type, [data], fn)
概述
作用:对指定元素添加相应事件,即使这个元素是后来页面动态生成的,依旧有用。如:
id为“newDiv”的一个div是页面动态生成的元素,我们现在点击这个元素后弹框。做法很多,举个对比例子:
html代码
<span style="font-size:14px;"><div id="newDiv">click me</div></span>
js代码
一、
<span style="font-size:14px;"><span style="font-size:12px;color:#333333;">$('#newDiv').on('click', function() { alert("Live handler called."); });</span></span>
发现点击后没有弹框。
二、
<span style="font-size:14px;"><span style="font-size:12px;color:#333333;">$('#newDiv').live('click', function() { alert("Live handler called."); });</span></span>
点击后弹框。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
二、 $.on() 方法
on方法可以接受三个参数:事件名、触发选择器、事件函数。
需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。
例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样写:
<span style="font-size:14px;">$('#parent').on('click','.son',function(){alert('test')});</span>
这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector),只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成的,原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了,只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。
例如,在低版本IE中A标签在鼠标按下时候会出现虚线边框,这是由focus造成的。我们只要在全局事件中做点手脚就能解决这个问题。在现代浏览器中focus是不冒泡的,但是低版本浏览器中可以冒泡。所以对于低版本浏览器中对focus使用live是有效的。在jQuery1.9之前的版本我们可以这样写:
<span style="font-size:14px;">$("a").live("focus",function(){ this.blur();});</span>
jQuery1.9之后由于live被删除了,但不能这样写,这样写只能相当于bind()的用法:
<span style="font-size:14px;">$(document).on("focus",function(){ this.blur();});</span>
所以要替代live事件,应该这样写:
<span style="font-size:14px;">$(document).on("focus","a",function(){ this.blur();});</span>
还要注意个问题,如果是从live的写法换成on的写法别忘了调整调用链。因为live的返回值是事件触发的对象,而使用on则是在容器对象上。
<span style="font-size:14px;"> //jQuery1.9-$("#panel").find("div").live("click",function(){ alert("x");}).addClass("x"); //jQuery1.9+$("#panel").on("click","div",function(){ alert("x");}).find("div").addClass("x"); </span>
注意最后的find("div"),其它就没什么问题了。下面是官方说明
http://jquery.com/upgrade-guide/1.9/#live-removed
- 【jQuery】为动态生成的元素添加时间监听
- jQuery为动态生成的select元素添加事件
- jquery为动态生成的元素添加点击事件
- jQuery为动态生成的元素添加事件
- jquery 动态生成的元素 添加事件
- jQuery on和off配合使用为动态生成的元素绑定监听事件
- jquery为动态生成元素添加点击事件
- 关于jquery无法为动态生成的dom元素添加点击事件的问题
- jQuery为动态生成的select元素添加事件的方法
- jquery无法为动态生成的元素添加点击事件的解决方法
- jquery为动态生成的元素生成click事件
- jquery为动态添加元素添加事件
- jquery为动态添加元素添加事件
- jquery为动态添加元素添加事件
- jQuery给动态生成的元素添加事件
- jquery为不存在的元素动态添加事件
- jquery为动态添加的元素绑定事件
- jquery为动态添加的元素绑定事件
- Android APK反编译
- Java中空对象(null)引用方法及属性简单分析!
- 埃拉托斯特尼筛法 --- 希腊,筛选素数
- MySQL两种引擎的区别
- 选择恐惧症的福音!教你认清MVC,MVP和MVVM(一)
- 【jQuery】为动态生成的元素添加时间监听
- UI:Android红包界面
- 前言
- 数据结构实验之图论八:欧拉回路
- MathType的使用技巧到底有哪些
- 选择恐惧症的福音!教你认清MVC,MVP和MVVM(二)
- NOIP2012 借教室(classroom)
- 大型网站架构系列:电商网站架构案例(转)
- 多表连接二(更优解决办法)