.live()

Categories: Events > Event Handler Attachment

.live( eventType, handler ) 返回： jQuery

描述： 附加一个事件处理器到符合目前选择器的所有元素匹配，现在和未来。

version added: 1.3.live( eventType, handler )

eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.

handler每次事件触发时会执行的函数。
version added: 1.4.live( eventType, eventData, handler )

eventType一个包含一个JavaScript事件类型的字符串，比如"click"或"keydown"。在jQuery 1.4中，该字符串可以包含多个用空格分隔的事件类型或自定义事件名称。

eventData将要传递给事件处理函数的数据映射。

handler每次事件触发时会执行的函数。

这个方法是基于.bind()方法在元素上绑定事件处理器的一种变化。当.bind()被调用时，该元素的jQuery对象，是指附加处理器的元素;后面引入的让元素不能这样做，所以他们需要另一个.bind()调用。看下面的代码：

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

我们可以在这个元素上绑定一个简单的点击处理器：

$('.clickme').bind('click', function() {
  // Bound handler called.
});

当元素被点击时，该处理程序被调用。但是，假设在此之后，另一个因素被增加：

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

这个新元素也匹配.clickme选择器，但因为它是调用.bind()后再添加的，点击它什么都不会做。

.live()方法提供了一个可以替代的行为。如果我们绑定单击处理器到目标元素使用此方法：

$('.clickme').live('click', function() {
  // Live handler called.
});

再后来加入新元素：

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

然后点击新添加的元素也会触发的处理程序。

事件描述

.live()方法能影响尚未通过对事件的DOM方法添加的使用元素：绑定到父元素的处理程序是对于那些在其后代触发的事件负责。传递给处理器给.live()从不绑定到一个元素;相反， .live()绑定一个特殊的处理到DOM树的根。在我们的例子，当新的元素被点击，执行以下步骤：

一个Click事件生成，并传递到 <div>处理。
没有处理器是直接绑定到
，因此事件向上冒泡的DOM树。
这个时间泡沫，直到它到达树的根，.live()默认情况下结合其特殊的处理。
* 在 jQuery 1.4中, 事件冒泡可以随意停在 "context" DOM元素的。
特别click通过.live()执行的处理器。
此处理程序测试target的事件对象，看它是否应该继续下去。这项测试是由检查，如果$(event.target).closest('.clickme')是能够找到一个匹配的元素。
如果找到一个匹配的元素，原来的处理程序被调用就可以了。

因为直到事件发生时在第5步不进行测试，元素可以在任何时候添加，仍然响应事件。.

更多信息见.bind()。

Multiple Events

在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
  }
});

Event Data

在jQuery 1.4 中，可选eventData参数允许我们通过附加信息处理程序。一个方便的使用这个参数来解决由于闭包造成的问题。更多信息见"Passing Event Data"。

Event Context

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

$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});

The live handler in this example is called only when <div class="clickme"> is a descendant of an element with an ID of "container."

Caveats

The .live() technique is useful, but due to its special approach cannot be simply substituted for .bind() in all cases. Specific differences include:

DOM traversal methods are not fully supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector, as in the example above.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events. As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout).

As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

Examples:

Example: Click a paragraph to add another. Note that .live() binds the click event to all paragraphs - even new ones.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Click me!</p>

  <span></span>
<script>
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>

</body>
</html>

Demo:

Example: To display each paragraph's text in an alert box whenever it is clicked:

$("p").live("click", function(){
  alert( $(this).text() );
});

Example: To cancel a default action and prevent it from bubbling up, return false:

$("a").live("click", function() { return false; })

Example: To cancel only the default action by using the preventDefault method.

$("a").live("click", function(event){
  event.preventDefault();
});

Example: Can bind custom events too.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
<script>

    $("p").live("myCustomEvent", function(e, myName, myValue){
      $(this).text("Hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent");
    });

</script>

</body>
</html>

.live()

.live( eventType, handler ) 返回： jQuery

version added: 1.3.live( eventType, handler )

version added: 1.4.live( eventType, eventData, handler )

事件描述

Multiple Events

Event Data

Event Context

Caveats

Examples:

Example: Click a paragraph to add another. Note that .live() binds the click event to all paragraphs - even new ones.

Demo:

Example: To display each paragraph's text in an alert box whenever it is clicked:

Example: To cancel a default action and prevent it from bubbling up, return false:

Example: To cancel only the default action by using the preventDefault method.

Example: Can bind custom events too.

Demo: