返回值:jQuerylive(events, handler(eventObject))

为所有与选择器匹配的元素添加一个事件处理。匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

从 jQuery 1.7 开始，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。

该函数提供了一种向页面的 document 元素添加代理事件处理的方法，从而简化了在页面上动态添加的内容上事件处理的使用。有关直接添加事件处理和使用代理事件的讨论，请参阅在 .on() 方法中的相关说明。

在 .live() 的后继方法中重写 .live() 方法是很简单的。以下是三种事件添加方法的模板，它们是等价的： 

$(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 参数既可以是用空格分隔的事件类型名（还可以包含事件类型对应的可选的命令空间）列表，也可以是由事件名符串及其处理函数组成的 event-map。data 参数是可选的，也可以忽略此参数。例如，以下三种方法在功能上是一样的（后文还提供了更有效，性能更好的添加代理事件处理的方式）： 

$("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() 会带来如下问题:

  • 在调用 .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 事件!

如果依然在使用 .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.

示例:

点击段落时，添加另一个段落。注意，.live() 会为所有的段落(包括新生成的段落)绑定事件。

<!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="jquery.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>

演示:

示例:

通过返回 false 的方法，取消默认的动作，并阻止事件向上冒泡。

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

示例:

通过使用 preventDefault 方法仅取消默认的动作。

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

示例:

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

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; }
  span { color:blue; }
  </style>
<script src="jquery.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() 会为所有的段落(包括新生成的段落)绑定 click, mouseover, 和 mouseout 事件。

<!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="jquery.min.js"></script>
</head>
<body>


  <p>Click me!</p>
  <span></span>
  

<script>


$("p").live({
  click: function() {
    $(this).after("<p>Another paragraph!</p>");
  },
  mouseover: function() {
    $(this).addClass("over");
  },
  mouseout: function() {
    $(this).removeClass("over");
  }
});


</script>
</body>
</html>

演示: