平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前有一个插件会解决这个问题http://plugins.jquery.com/project/livequery ,jQuery1.3增加了一个live()方法,下面是手册上的说明:

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

还不支持 blur, focus, mouseenter, mouseleave, change, submit

与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像,但有以下几个主要区别:

  • .live 目前只支持所有事件的子集,支持列表参考上面的说明。
  • .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
  • .live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。

要移除用live绑定的事件,请用die方法

用法示例:

<div class=”myDiv”></div>

jquery:

$(“.myDiv”).live(“click”, function(){

alert(“clicked!”);

});

如果使用javascript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟jquery.livequery插件不一样,jquery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。

使用live当然有利也有弊:
好处就是:元素更新时不用反复去定义事件。
坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。

jQuery live与bind的区别的更多相关文章

  1. jquery .live() .delegate() .bind() .click()区别

    什么是.live()? 除了让你对Dom元素现在和将来绑定事件之外,.live() 方法和.bind()方法很像.你可以用.live()方法对没有存在的Dom节点绑定事件.考虑下面的情况. 当用户要离 ...

  2. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  3. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  4. jquery的trigger和triggerHandler区别

    网上关于这个问题都是抄来抄去的,都没怎么说清楚.所以自己做了个测试,供大家参考指教.首先先看API怎么说的 为了检验一下,编写了一个简单的测试代码,如下: <html lang="en ...

  5. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  6. javascript中apply、call和bind的区别,容量理解,值得转!

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  7. jquery生产和开发的区别

    今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...

  8. JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  9. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

随机推荐

  1. [spring]启动时报错:NoSuchMethodError: javax.servlet.http.HttpServletResponse.getStatus()I

    Spring V4.1以后的版本在不支持Servlet3.0的应用服务器上跑时会报如下错误: NoSuchMethodError: javax.servlet.http.HttpServletResp ...

  2. PhyreEngine3.8 MSAA resolution

    There is something wrong in PhyreEngine 3.8 to fullfill MSAA, actually, I think it is eqaa You have ...

  3. 关于vs2010 起始页

    vs2010 起始页不显示怎么解决 工具 ---> 选项---->环境---->启动---->启动时(选项框),然后点击框尾的下拉三角按钮,点选"显示起始页" ...

  4. java Socket用法详解(转)

    在客户/服务器通信模式中, 客户端需要主动创建与服务器连接的 Socket(套接字), 服务器端收到了客户端的连接请求, 也会创建与客户连接的 Socket. Socket可看做是通信连接两端的收发器 ...

  5. Silverlight弹出层(转载)

    ChildWindow为Silverlight中的弹出子窗口 可以在项目新建子窗口文件: 相互传值: //父窗体向子窗体传值,需要在ChildWindow中构造函数进行传值ChildWindowTes ...

  6. C# 知识笔记

    HttpContext.Request.Form.ToString() 获取Form表单中的内容 /// <summary> /// 获取 GET 提交方式值 /// </summa ...

  7. hdu 2582 f(n) 数学

    打表找规律: 当n为质数是,GCD(n)=n; 当n为质数k的q次方时,GCD(n)=k; 其他情况,GCD(n)=1. 代码如下: #include<iostream> #include ...

  8. lintcode:最大子数组II

    题目 最大子数组 II 给定一个整数数组,找出两个不重叠子数组使得它们的和最大. 每个子数组的数字在数组中的位置应该是连续的. 返回最大的和. 样例 给出数组[1, 3, -1, 2, -1, 2], ...

  9. linux上tomcat安装

    转载:http://my.oschina.net/zmf/blog/309484 tomcat安装 下载后解压:tar -zxvf apache-tomcat-7.0.28 移动到/usr/local ...

  10. linux快速修改文件夹及文件下所有文件与文件夹权限

    分两部分改属主和权限: 更改权限,递归方式 chmod -R 755 /var/www/html/test.com 更改属主,递归 chown -R apache:apache /var/www/ht ...