.live()

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

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

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

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

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

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

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

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

    • events
      类型: 普通对象
      一个或多个 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+
});

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

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

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

示例

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

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

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

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

使用 .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" );
});

使用对象绑定多个实时事件处理程序。请注意，.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" );
  }
});