.live()

类别: 已弃用 > 已弃用 1.7 | 事件 > 事件处理程序附加 | 已移除

.live( events, handler )返回: jQuery版本已弃用: 1.7, 已移除: 1.9

描述: 为所有匹配当前选择器的元素附加事件处理程序，现在和将来都适用。

  • 版本添加: 1.3.live( events, handler )

    • events
      类型: 字符串
      包含 JavaScript 事件类型（如 "click" 或 "keydown"）的字符串。从 jQuery 1.4 开始，字符串可以包含多个由空格分隔的事件类型或自定义事件名称。
    • handler
      类型: Function( Event eventObject )
      事件触发时执行的函数。

  • 版本添加: 1.4.live( events [, data ], handler )

    • events
      类型: 字符串
      包含 JavaScript 事件类型（如 "click" 或 "keydown"）的字符串。从 jQuery 1.4 开始，字符串可以包含多个由空格分隔的事件类型或自定义事件名称。
    • data
      类型: PlainObject
      一个包含将传递给事件处理程序的数据的对象。
    • handler
      类型: Function( Event eventObject )
      事件触发时执行的函数。

  • 版本添加: 1.4.3.live( events )

    • events
      类型: PlainObject
      包含一个或多个 JavaScript 事件类型和要为它们执行的函数的普通对象。

注意: 此 API 已在 jQuery 1.9 中移除；请使用 on() 代替。

此方法提供了一种为页面 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+

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

由于 jQuery 的后续版本提供了不具备其缺点的更好方法，因此不再推荐使用 .live() 方法。特别是，使用 .live() 会出现以下问题：

  • jQuery 在调用 .live() 方法之前尝试检索选择器指定的元素，这在大文档中可能会耗时。
  • 不支持链式方法调用。例如，$( "a" ).find( ".offsite, .external" ).live( ... ); 是*无效*的，并且无法按预期工作。
  • 由于所有 .live() 事件都附加在 document 元素上，事件在被处理之前会经过最长、最慢的路径。
  • 在移动 iOS（iPhone、iPad 和 iPod Touch）上，对于大多数元素，click 事件不会冒泡到 document body，并且无法与 .live() 一起使用，除非应用以下一种解决方法：
    1. 使用原生可点击元素，如 a 或 button，因为它们都会冒泡到 document。
    2. 使用 .on() 或 .delegate()，并将它们附加到 document.body 下方的元素，因为移动 iOS 会在 body 中冒泡。
    3. 将 CSS 样式 cursor:pointer 应用于需要冒泡点击的元素（或包含 document.documentElement 的父级）。但请注意，这会禁用元素上的复制/粘贴，并在触摸时突出显示该元素。
  • 在事件处理程序中调用 event.stopPropagation() 对于阻止事件处理程序在文档下方执行无效；事件已传播到 document。
  • .live() 方法以令人惊讶的方式与其他事件方法交互，例如，$( document ).off( "click" ) 会删除由任何 .live() 调用附加的所有 click 处理程序！

对于仍在使用 .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。

示例

示例 1

返回 false 可取消默认操作并阻止其冒泡。

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

示例 2

仅使用 preventDefault 方法取消默认操作。

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

示例 3

使用 .live() 绑定自定义事件。

1
2
3
4
5
6
7
8
9
10
11
12
 
$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).on( "click", function() {
  $( "p" ).trigger( "myCustomEvent" );
});

示例 4

使用对象来绑定多个 live 事件处理程序。请注意，.live() 会为所有段落（包括新段落）调用 click、mouseover 和 mouseout 事件处理程序。

1
2
3
4
5
6
7
8
9
10
11
 
$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});