jquery live()重复绑定的解决方法介绍

2020-05-22 22:01:07易采站长站整理


事件委托


.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。


传递给 .live()的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:


1、生成一个click事件传递给<div> 来处理


2、由于没有事件处理函数直接绑定在 <div>上,所以事件冒泡到DOM树上


3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。


4、执行由 .live()绑定的特殊的 click 事件处理函数。


5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测$(event.target).closest(‘.clickme’) 能否找到匹配的元素来实现的。


6、如果找到了匹配的元素,那么调用原始的事件处理函数。


由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。



附加说明


.live()虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:


在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。


另 外,在jQuery1.4.1中,也能支持hover(映射到”mouseenter mouseleave”)。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.


.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()方法,正如前面例子里提到的。


当一个事件处理函数用 .live()绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。



参考 .bind() 方法可以获得更多关于事件绑定的信息。


在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟.bind() 提供的功能类似。


在jQuery 1.4中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。



参数


typeString     事件类型


data(可选)    Object          欲绑定的事件处理函数