jQuery live() 方法是给所有匹配的元素附加一个事件处理函数，即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说：
1 | <body> <div class="clickme">Click here</div> </body> |
可以给这个元素绑定一个简单的click事件：
1 | $('.clickme').bind('click', function() { alert("www.phpernote.com"); }); |
当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。
1 | $('body').append('<div class="clickme">Another target</div>'); |
尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。
但 live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：
1 | $('.clickme').live('click', function() { alert("www.phpernote.com"); }); |
这样点击新增的元素，他依然能够触发事件处理函数。
事件委托
live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。
在我们的例子中，当点击新的元素后，会依次发生下列步骤：
生成一个click事件传递给 <div> 来处理。
由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上。
事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
执行由 .live() 绑定的特殊的 click 事件处理函数。
这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
如果找到了匹配的元素，那么调用原始的事件处理函数。
由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
附加说明
.live() 虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：
- 在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
- .live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live() 方法，正如前面例子里提到的。
- 当一个事件处理函数用 .live() 绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。
扫一扫
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
