返回值:jQuerylive(type, [data], fn)

概述

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>

  <div class="clickme">Click here</div>

</body>

可以給這個元素綁定一個簡單的click事件:


$('.clickme').bind('click', function() {

  alert("Bound handler called.");

});

當點擊了元素,就會彈出一個警告框。然後,想象一下這之後有另一個元素添加進來了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {

  alert("Live handler called."); 

});

然後再添加一個新元素:


$('body').append('<div class="clickme">Another target</div>');

然後再點擊新增的元素,他依然能夠觸發事件處理函數。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

  1. 生成一個click事件傳遞給
    來處理
  2. 由于没有事件处理函数直接绑定在 <divgt; 上,所以事件冒泡到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上)。另外,在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() 无法实现这个目的。

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

在jQuery 1.4.1 中,.live() 能接受多个,用空间分隔事件,在提供类似.bind()的功能 。例如,我们可以“live ” 同时绑定mouseover和mouseout事件,像这样:


$('.hoverme').live('mouseover mouseout', function(event) {

  if (event.type == 'mouseover') {

    // do something on mouseover

  } else {

    // do something on mouseout

  }

});

在jQuery 1.4.3中:你可以绑定一個或多個事件類型的字符串和函數的數據映射來執行他們


$("a").live({

  click: function() {

    // do something on click

  },

  mouseover: function() {

    // do something on mouseover

  }

});

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

在jQuery 1.4 中, live事件可以绑定到“context”DOM元素,而不是默认的文档的根。要设置此背景下,我们通过在一个单一的DOM元素(而不是一个jQuery集合或选择器)使用jQuery() function's second argument。


$('div.clickme', $('#container')[0]).live('click', function() {

  // Live handler called.

});

參數

type,[fn]String,FunctionV1.3

type:一個或多個事件類型,由空格分隔多個事件。

fn:要從每個匹配元素的事件中反綁定的事件處理函數

type,[data],falseString,Array,boolV1.4

type:一個或多個事件類型,由空格分隔多個事件。

data:传递给事件处理函数的附加參數

false:設置爲false會使默認的動作失效。

eventStringV1.4.3

一個或多個事件類型的字符串和函數的數據映射來執行他們

示例

描述:

點擊生成的p依然據有同樣的功能。

HTML 代码:
<p>Click me!</p>
jQuery 代码:
$("p").live("click", function(){

    $(this).after("<p>Another paragraph!</p>");

});

描述:

阻止默认事件行为和事件冒泡,返回 false

jQuery 代码:
$("a").live("click", function() { return false; });

描述:

僅僅阻止默認事件行爲

jQuery 代码:
$("a").live("click", function(event){

  event.preventDefault();

});