jQuery live()

概述

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
  <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然后再添加一个新元素:

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

  1. 生成一个click事件传递给 来处理
  2. 由于没有事件处理函数直接绑定在 <divgt; 上,所以事件冒泡到DOM树上
  3. 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
  4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
  5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
  6. 如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。

附加说明

.live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

  • 在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery 1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  • .live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
  • 当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1 中,.live() 能接受多个,用空间分隔事件,在提供类似.bind()的功能 。例如,我们可以“live ” 同时绑定mouseover和mouseout事件,像这样:

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

在jQuery 1.4.3中:你可以绑定一个或多个事件类型的字符串和函数的数据映射来执行他们

$("a").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

在jQuery 1.4 中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind() 的讨论来获得更多信息。

在jQuery 1.4 中, live事件可以绑定到“context”DOM元素,而不是默认的文档的根。要设置此背景下,我们通过在一个单一的DOM元素(而不是一个jQuery集合或选择器)使用jQuery() function's second argument。

$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});

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

参数

type,[fn]String,FunctionV1.3

type:一个或多个事件类型,由空格分隔多个事件。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,[data],falseString,Array,boolV1.4

type:一个或多个事件类型,由空格分隔多个事件。

data:传递给事件处理函数的附加参数

false:设置为false会使默认的动作失效。

eventStringV1.4.3

一个或多个事件类型的字符串和函数的数据映射来执行他们

示例

描述:

点击生成的p依然据有同样的功能。

HTML 代码:
<p>Click me!</p>
jQuery 代码:
$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

描述:

阻止默认事件行为和事件冒泡,返回 false

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

描述:

仅仅阻止默认事件行为

jQuery 代码:
$("a").live("click", function(event){
  event.preventDefault();
});
以上就是jQuery live()的全部内容,希望这篇jQuery live()能帮到你,更多内容请访问前端开发博客。

前面的一篇文章我们已经实现了postMessage+window.name实现了iframe高度自适应,iframe跨域通信,这篇文章基于jquery,完善了之前文章作者提到的一些不足,一起来看看。 - 2018-09-12

本文分享了使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。 - 2018-09-14

很久没用fullpage插件来实现全屏效果的滚动了,我自己整理了一个比较简单的PC版全屏滚动代码,几乎fullpage有的东西都有,代码一看就懂。 - 2018-05-09

前端开发制作中有需要需要等到页面中的图片加载完毕后才执行某些事件,而使用jquery的load事件只是dom执行完毕,图片未必加载完成,如果要判断图片加载完毕,需要在图片标签上判断。 - 2018-02-07

jQuery有没有获取图片实际尺寸的方法?就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸。本文给出一个兼容的方式。 - 2018-01-15

很早就使用jQuery的$.extend({},obj1,obj2)来合并两个对象,原来jQuery的这个方法就是深度拷贝($.extend(true,{},obj1))和浅度拷贝的意思,这篇文章分享了 Underscore、lodash 和 jQuery 这些主流的第三方库对于深度拷贝和浅度拷贝的实现与区分。 - 2017-12-02

本文要推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有canvas格式的。canvas的支持自定义logo和文字在上面。 - 2017-06-03

- 2017-07-21

本文整理了一些主要的jQuery API,其中包括jQuery 核心函数和方法、jQuery属性参考手册、jQuery CSS操作、jQuery选择器、jQuery文档操作、jQuery筛选操作、jQuery事件方法、jQuery效果、jQuery Ajax操作、jQuery工具函数、jQuery事件对象、jQuery延迟对象、jQuery回调函数,欢迎收藏使用,本手册会持续更新。 - 2017-04-27

niceScroll 是一个类似于 iOS /移动端 样式的 jQuery 滚动条插件,不需要增加额外的CSS,几乎全浏览器兼容,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。 - 2018-03-16

全部展开 | 全部折叠 | jQuery API手册