jQuery中.live()方法的用法深入解析

给jquery动态生成的页面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。

更多详情还见官网http://api.jquery.com/live/

live(type, [data],fn)

概述

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

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

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

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

当点击了元素，就会弹出一个警告框。

然后，想象一下这之后有另一个元素添加进来了。

$('body').append('
Another target
');

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

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

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

然后再添加一个新元素：

$('body').append('
Another target
');

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

事件委托

.live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live()的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1、生成一个click事件传递给<div> 来处理

2、由于没有事件处理函数直接绑定在 <div>上，所以事件冒泡到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上）。

另外，在jQuery1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery1.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() 提供的功能类似。

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

参数

typeString     事件类型

data(可选)    Object          欲绑定的事件处理函数

fn                  Function        欲绑定的事件处理函数

示例

HTML 代码:
 
Click me!

jQuery 代码:
    $("p").live("click", function(){
         $(this).after("

Another paragraph!

");
    });

描述:

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

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

描述:

仅仅阻止默认事件行为

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

赞 (0)

相关推荐

  • jQuery1.9+中删除了live以后的替代方法

    根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名.id或者元素名,使用它就可以实现live的效果. 例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样

  • jquery live()调用不存在的解决方法

    jquery live()调用不存在的解决方法

    在新版的jquery中,live()方法已经被删除了,所以我们在调用的时候会提示该函数不存在,js报错. 解决方法是使用on()函数替换, 原来的写法是:  如果直接替换为on()方法,那么新生成的元素再次点击事件的时候不会有任何效果,新的语法是:  这里涉及到一个问题,$("body")这里为什么是body,其实我们可以选择其他的距离#company_logo更近的节点,这样会有更好的性能,其实on()是在body中找#company_logo节点,所以我们吧body换成#compa

  • jQuery中用dom操作替代正则表达式

    在B/S结构客户端越来越"胖"的今天,作为一名全端程序员,您很可能会在前端操作html字符串,注意,是操作html字符串,不是操作当前页面的html. 举个例子,百度推出的在线HTML富文本编辑器Ueditor,可以在线制作富文本文档,功能堪比精简版的Microsoft Word.虽然Ueditor身披百度的光环,但实际效果不太让人满意,我们需要二次处理一下它生成的html字符串,比如把所有图片的宽度设成90%. 通过某个方法,我们可以拿到文本编辑器中的html字符串,假设字符串如下:

  • jQuery EasyUI 开源插件套装 完全替代ExtJS

    jQuery EasyUI 开源插件套装 完全替代ExtJS

    前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquery-1.9.0.js'></script

  • 浅谈被jQuery抛弃的函数及替代函数

    早前为了更好的浏览器兼容性,一直是使用jQuery-1.7.2版本:但是随着各大浏览器和技术的飞速发展,连bootstrap新版本都是需要引入jQuery-1.9以上的版本,代表着常用的jQuery-1.7.2也该告别历史舞台了: 但 是有些我们常用的函数也被弃用了:不注意的话就会各种报错:下面就来盘点这些已经被抛弃的函数:当然如果你不认识介绍的这些被弃函数:那恭喜你不需要去记 了,只需要理解它的替代函数即可:本文的意义是提醒亲们哪些函数被弃用了以及该用那些函数来替代:至于替代函数具体使用方法请

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • jQuery 1.9移除了$.browser可以使用$.support来替代

    $.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的文档中已经声明jquery.browser及jquery.browser.version建议弃用,可以使用jquery.support来代替. jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,

  • jquery ui dialog替代confirm实例分析

    本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.

  • jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码 代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候 菜单还没加载出来呢,所以就要用到

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

  • jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){

  • 深入理解jQuery中live与bind方法的区别

    注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间 区别一: Click here 可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() {$('body').append(' Another target');}); 当点击了元素,就会弹出一个警告框.然后,想象一下这之后有另一个元素添加进来了. 尽管

  • jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型:eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事

随机推荐