jquery中的.live()

原文:http://api.jquery.com/live/

参考译文:http://www.css88.com/jqapi-1.9/live/

Description: Attach an event handler for all elements which match the current selector, now and in the future.

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

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

 从jQuery1.7开始，  .live() 方法已经过时了。请使用.on()附加事件处理程序。 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。

这个方法提供了一种手段，将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用。直接与委派事件的讨论，请查看.on()方法的更多信息。

在其继承者重写.live()方法是简单的;以下是三种事件添加方法的模板，它们是等价的：

1 2 3

$( selector ).live( events, data, handler ); // jQuery 1.3+ $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+ $( document ).on( events, selector, data, handler ); // jQuery 1.7+

The events argument can either be a space-separated list of event type names and optional namespaces, or an object of event name strings and handlers. The data argument is optional and can be omitted. For example, the following three method calls are functionally equivalent (but see below for more effective and performant ways to attach delegated event handlers):

events 参数可以是一个空格隔开的事件类型名称的列表和可选的命名空间，或事件名称字符串和处理程序的对象。data参数是可选的，可以省略。例如，以下三种方法调用方式在功能上是相同的（后文还提供了更有效，性能更好的添加代理事件处理的方式）：

1 2 3 4 5 6 7 8 9

$( "a.offsite" ).live( "click", function() { alert( "Goodbye!" ); // jQuery 1.3+ }); $( document ).delegate( "a.offsite", "click", function() { alert( "Goodbye!" ); // jQuery 1.4.3+ }); $( document ).on( "click", "a.offsite", function() { alert( "Goodbye!" ); // jQuery 1.7+ });

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

• jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
• Chaining methods is not supported. For example, $( "a" ).find( ".offsite, .external" ).live( ... ); is not valid and does not work as expected.
• Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
• On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:
  1. Use natively clickable elements such as a or button, as both of these do bubble to document.
  2. Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  3. Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
• Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
• The .live() method interacts with other event methods in ways that can be surprising, e.g., $( document ).off( "click" ) removes all click handlers attached by any call to .live()!

因为更高版本的jQuery提供了更好的方法，并且没有.live()方法的缺点，所以.live()方法不再推荐使用。特别是，使用.live()出现的以下问题：

• 在调用 .live() 方法之前，jQuery 会先获取与指定的选择器匹配的元素，这一点对于大型文档来说是很花费时间的。
• 不支持链式写法。例如，$("a").find(".offsite, .external").live( ... ); 这样的写法是不合法的，并不能像期待的那样起作用。
• 由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。
• 在移动 iOS (iPhone, iPad 和 iPod Touch) 上，对于大多数元素而言，click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：
  1. 使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
  2. 在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
  3. 需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。
• 在事件处理中调用 event.stopPropagation() 来阻止事件处理被添加到 document 之后的节点中，是效率很低的。因为事件已经被传播到 document 上。
• .live() 方法与其它事件方法的相互影响是会令人感到惊讶的。例如，$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!

For pages still using .live(), this list of version-specific differences may be helpful:

• Before jQuery 1.7, to stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
• As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur.
• In jQuery 1.3.x only the following JavaScript events could be bound: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

对于仍在使用.live()的页面，那么下面关于该方法在不同版中的区别，可能会对您有一定帮助：

• 在 jQuery 1.7 之前，如果想阻止通过 .live() 绑定的事件被冒泡到其它元素上，必须在事件处理中返回 false。调用 .stopPropagation() 是不起作用的。
• 从 jQuery 1.4 开始，.live() 方法支持自定义事件，也支持所有 JavaScript 事件冒泡。它还支持一些原本不能冒泡的事件，包括 change, submit, focus 和 blur。
• 在 jQuery 1.3.x 中，只能绑定如下 JavaScript 事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.