时间:2021-05-25
jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:
可以给这个元素绑定一个简单的click事件:复制代码 代码如下:$('.clickme').bind('click', function() { alert(); });
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
复制代码 代码如下:$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:复制代码 代码如下:$('.clickme').live('click', function() { alert(""); });
这样点击新增的元素,它依然能够触发事件处理函数。
事件委托
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()方法的详细介绍,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法。摘录一段live简单使用方法。更多详情还见官网htt
遇到jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下:(中间的元素是动态生成的),现在想为添加点击事件,例子如下:这是元素内容//i
如题jQuery使用on()绑定动态生成元素的事件无效的问题jQuery的on()方法可以绑定动态生成元素的事件,但是在实际使用时发现无效。如下HTML:123
本文实例讲述了jQuery中die()方法用法。分享给大家供大家参考。具体分析如下:此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序。语
jQuery:unbind方法的使用详解一、前言unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序。比如:$(‘a')