jQuery 1.4.2中的.bind(),.live()&.delegate()方法解析

时间：2011-03-12 来源：程序诗人

.bind（）方法

.bind（）方法能够将一个操作绑定到特定的元素上去，然后在事件被调用的时候进行触发。需要注意的是.bind()方法只能够被绑定到已经存在的元素上去，才能够被执行。如果另一个符合要求的元素在.bind()事件绑定之后，才被添加到dom结构中，那么这个元素就不会被触发。

示例如下：

jQuery:

$('.alertMe', '#bindExample').bind('click', function() {

     alert('Clicked!');

});

$('#bindExample').append('<p class="alertMe">Alert <em>does not</em> fire on click!</p>');

HTML:

<div id="bindExample">

     <!-- action is bound to this paragraph for the click event -->

     <p class="alertMe">Alert fires on click!</p>

</div>

但是，这个示例里面，新添加进去的元素是不能够被触发的。

.live()方法

和.bind()方法类似，.live()方法也能够将事件绑定到元素上面。然而，与之不同的是,.live()方法能够将与之匹配的元素进行事件绑定，即便是元素被动态的创建，并且在.live()方法调用之后被创建。

需要注意的是，dom遍历方法不完全支持传统的jQuery元素的搜索方法，比如，不支持

$('#foo').children('.bar').live('click',function(){//do something });

但是却支持：

$('#foo .bar').live('click', function() { /do something });

所以，最好的方法就是直接绑定元素，当然.find()方法也是可以被支持的。

示例如下：

jQuery:

$('.alertMe', '#liveExample').live('click', function() {     alert('Clicked!');});$('#liveExample').append('<p class="alertMe">Alert fires on click (even though this      was added after .live() was called)!</p>');HTML:

<!-- action is bound to this parent div for child paragraph's click event --><div id="liveExample">     <!-- action is not bound to this paragraph  -->     <p class="alertMe">Alert fires on click!</p></div>

这次，绑定事件就会被触发了。

.delegate()方法

.delegate()方法同live方法一样，也是绑定事件的，但是其效率要比live方法好上4倍不止，并且他只绑定选择器中指定的元素，而不是从根元素绑定开始。所以对于类似于 $('#foo').delegate('.bar', ...)的绑定来说，.bar上面绑定的事件将会被同时绑定到#foo元素上。不过，需要小心的是，如果选择器本身是被ajax更换的，那么符合条件的替换元素将不会被绑定。

.delegate()不会被dom生成的元素所限制，但是.live()方法会。

示例如下：

jQuery:

$('#delegateExample').delegate('.alertMe', 'click', function() {     alert('Clicked!');});$('#delegateExample').append('<p class="alertMe">Alert fires on click (even though this      was added after .delegate() was called)!</p>');HTML:

<!-- action is bound to this parent div for child paragraph's click event --><div id="delegateExample">     <!-- action is not bound to this paragraph  -->     <p class="alertMe">Alert fires on click!</p></div>