jquery中live()方法

实例

当点击按钮时，隐藏或显示 p 元素：

$("button").live("click",function(){
  $("p").slideToggle();
});

亲自试一试

定义和用法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法

$(selector).live(event,data,function)

参数	描述
event	必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到该函数的额外数据。
function	必需。规定当事件发生时运行的函数。

亲自试一试 - 实例

向未来的元素添加事件处理器

如何使用 live() 方法向尚未创建的元素添加事件处理器。

实现原理

live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：
　　生成一个click事件传递给 <div> 来处理
　　由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上
　　事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
　　执行由 .live() 绑定的特殊的 click 事件处理函数。
　　这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
　　如果找到了匹配的元素，那么调用原始的事件处理函数。
　　由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

jquery1.9作了很大的调整，live()方法被踢除。

之前的用法：

.live(events， function)  

新方法：

.on(eventType, selector, function)

若selector不需要，可传入null

 

例子1：

之前：

$('#mainmenu a').live('click', function)

之后：

$('#mainmenu').on('click', 'a', function)

 

 

例子2：

之前：

$('.myButton').live('click', function)

之后(应使用距离myButton最近的节点)：

$('#parentElement').on('click', ‘.myButton’, function)

若不知最近的节点，可使用如下的方法：

 

$('body').on('click', ‘.myButton’, function)