jQuery向动态生成的内容添加事件响应 jQuery live() 方法详解 [收藏]

发布时间：2013-07-24 点击次数：176 来源：www.daimajiayuan.com

jQuery live() 方法是给所有匹配的元素附加一个事件处理函数，即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。

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

<body>

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

</body>

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

$('.clickme').bind('click', function() { alert("www.phpernote.com"); });

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

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

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

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

$('.clickme').live('click', function() { alert("www.phpernote.com"); });

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

事件委托

live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

在我们的例子中，当点击新的元素后，会依次发生下列步骤：

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

由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上。

事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。

执行由 .live() 绑定的特殊的 click 事件处理函数。

这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。

这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。

如果找到了匹配的元素，那么调用原始的事件处理函数。

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

ie下，jquery为动态添加的节点添加事件，用live的更多相关文章

  1. jquery为动态添加元素绑定点击事件

    on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素) $("#mainbody").on("click",".link&qu ...

  2. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

  3. jquery每次动态加载dom,绑定事件会多一次,

    jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次 解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...

  4. jquery给动态生成的元素绑定事件，on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  5. JQuery中动态生成元素的绑定事件（坑死宝宝了）

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  6. JQuery对于动态生成的标签绑定事件失效

    JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操 ...

  7. Jquery给动态生成的对象绑定事件

    $(document).on("blur", ".Text1", function () { var index = this.id.replace('txtS ...

  8. [jquery] 给动态生成的元素绑定事件 on方法

    用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(documen ...

  9. redis cluster 添加/删除节点操作

    RedisCluster 添加/删除节点 添加节点新配置两个测试节点8008和9009 [root@--- ~]# /usr/local/redis-/bin/redis-server /u02/re ...

随机推荐

  1. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. photoshop入门笔记2：PS箭头的制作

    ---恢复内容开始--- 1.     首先打开ps软件,在ps里新建一个画布这里就500*500,可以随意. 2.然后在ps软件界面上的工具栏里找到‘直线工具’,如图. 3.选择好工具之后,在ps软 ...

  3. 12，DBUtils - Python数据库连接池

    创建数据库连接池: import time import pymysql import threading from DBUtils.PooledDB import PooledDB, SharedD ...

  4. WPF系列教程——(一)仿TIM QQ界面 - 简书

    原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...

  5. 1196/P2323: [HNOI2006]公路修建问题

    1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2191  Solved: 1258 Descriptio ...

  6. 使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码 (jvm性能调优)

    技术交流群:233513714 本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 ...

  7. Python 定义及使用结构体

    Python中没有专门定义结构体的方法,但可以使用class标记定义类来代替结构体,其成员可以在构造函数__init__中定义,具体方法如下. class seqNode: def __init__( ...

  8. Google Chrome 自定义协议（PROTOCOL）问题的处理

    最近在使用谷歌浏览器的时候遇到了自定义协议(PROTOCOL)的问题,比较折腾,特此记录,希望我浪费生命换来的结果能够帮助读到此文的朋友少浪费一点宝贵的时间! 由于某些原因,电脑里一直没有安装阿里旺旺 ...

  9. 《Cracking the Coding Interview》——第7章：数学和概率论——题目2

    2014-03-20 01:59 题目:有n只蚂蚁在正n边形的n个顶点,同时以同速率开始沿着边走.每只蚂蚁走的方向是随机的,那么这些蚂蚁至少有两只发生碰撞的概率是多少. 解法:只有所有蚂蚁都往一个方向 ...

  10. Java基础-8构造方法

    一).构造方法: 在之前我们提到对象的概念以及对象的实例化等,在这里简单回顾下: Man man = new Man(); 语句创建一个对象,new可以理解成创建一个对象的关键字,通过new关键字为对 ...