早期对页面上后期加载的动态元素,赋事件或值的时候,是使用live的.  由于效率比较低(其实数据不多也感觉不出来),后面使用delegate委托来代替了,再后面,1.7以后使用on 来代替delegate了. live,delegate在新版本中都还可以用. 它们在写法上有差别,一段时间不写容易混,写下来备忘. 如点击div里的任意一个button时增加一个新button:

脚本:

1.1 使用live

jQuery版本1.3+

$('.btnAdd').live('click', function () {
$(this).clone().appendTo('#panel');
});

1.2 直接把live改成on, 没有给范围比如#panel,这对页面上一开始有的按钮有效. 也就是说无法直接这样代替live

$('.btnAdd').on('click', function () {
$(this).clone().appendTo('#panel');
});

2.使用delegate 需要给它一个范围才行,如#panel,让它到里面找.这样可以实现live一样的效果.

jQuery版本1.4.3+

$('#panel').delegate('.btnAdd', 'click', function () {
$(this).clone().appendTo('#panel');
});

3.使用on 给它一个范围才行,如#panel,让它到里面找. 这样可以实现live和delegate一样的效果.

里面的'click', '.btnAdd'跟上面的delegate是相反的.只要记住on click是挨在一起的就行了.

jQuery版本1.7+

$('#panel').on('click', '.btnAdd', function () {
$(this).clone().appendTo('#panel');
});

jQuery,使用on代替delegate,live 写法区别的更多相关文章

  1. 谈 jquery中.band() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  2. jquery中bind,live,delegate,on的区别

    这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...

  3. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  4. jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  5. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  6. jQuery中bind() live() delegate() on() 的区别

    实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...

  7. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  8. 转 jQuery 中bind(),live(),delegate(),on() 区别

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  9. jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

    复制代码 代码如下: <input id="productName" name="productName" value="" /> ...

随机推荐

  1. 关于 Unchecked cast from Iterator to Iterator String 提示

    遇到个这个提示:Unchecked cast from Iterator to Iterator String Iterator<String> keys = data.keys(); 修 ...

  2. chd校内选拔赛题目+题解

    题目链接   A. Currency System in Geraldion 有1时,所有大于等于1的数都可由1组成.没有1时,最小不幸的数就是1. #include<iostream> ...

  3. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  4. percentiles of live data capture

    For example, every ten seconds I got a server response time, I want to know the 90 percentile respon ...

  5. sql server 查询表基本信息sql

    SELECT c.name,t.name TYPE,c.max_length,c.precision,c.scale,p.value FROM sys.systypes t INNER JOIN sy ...

  6. mac版tomcat修改端口无法访问,80端口无法访问

    在mac上安装好了tomcat,修改了端口为80,没想到关闭tomcat时提示出错,而且无法访问,原来我犯了两个错误. 1.我用的是mac上的文本编辑.app打开然后修改的,重新修改为8080也不行, ...

  7. Java继承多态中的方法访问权限控制

    java中的方法天生具有继承多态特性,这点与C++有很大不同(需要在父类方发上加virtual关键字),但用起来确实方便了许多. 最简单的继承多态 声明一个接口BaseIF,只包含一个方法声明 pub ...

  8. Struts2 stracture

  9. python学习day2

    一.模块初识 python模块 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用 ...

  10. log4j2

    转载自 Blog of 天外的星星: http://www.cnblogs.com/leo-lsw/p/log4j2tutorial.html Log4j 2的好处就不和大家说了,如果你搜了2,说明你 ...