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. python中的集合内置方法小结

    #!/usr/local/bin/python3 # -*- coding:utf-8 -*- #集合性质:需要传入一个list,且不含重复的元素,无序 list_1=[1,2,1,4,5,8,3,4 ...

  2. jpeglib的使用

    1. 解压jpeglib tar xvzf libjpeg-turbo-1.2.1.tar.gz 2. 阅读里面的说明文件,得到jpeg解压缩的一般步骤: /*Allocate and initial ...

  3. liteos学习文档liteos.github.io

    https://liteos.github.io该主页是华为liteos物联网操作系统的文档,里面有一章是“内核指南”,讲的是rtos的最主要的功能.可以当作liteos的入门了解,如果用rtos的使 ...

  4. Android开发——View滑动的三种实现方式

    0. 前言   Android开发中,我们常常需要View滑动实现一些绚丽的效果来优化用户体验.一般View的滑动可以用三种方式实现. 转载请注明出处:http://blog.csdn.net/seu ...

  5. 算法学习记录-图——应用之关键路径（Critical Path）

    之前我们介绍过,在一个工程中我们关心两个问题: (1)工程是否顺利进行 (2)整个工程最短时间. 之前我们优先关心的是顶点(AOV),同样我们也可以优先关心边(同理有AOE).(Activity On ...

  6. WebDriver--简单元素操作

    clear():清除文本,可用来键盘输入前清除一些input输入框默认的值 send_key(*value):模拟按键输入 click():单击,不止按钮,也可以是文字/图片链接.复选框.单选框.下拉 ...

  7. Python全栈工程师（多继承、函数重写）

    ParisGabriel                每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰    开局一张图 Python人工智能从入门到精通 补充: 对象 --------- ...

  8. 【PTA】Tree Traversals Again

    题目如下: An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For e ...

  9. 基于TensorFlow的循环神经网络(RNN)

    RNN适用场景 循环神经网络(Recurrent Neural Network)适合处理和预测时序数据 RNN的特点 RNN的隐藏层之间的节点是有连接的,他的输入是输入层的输出向量.extend(上一 ...

  10. php天龙八部

    <?php /* 一.操作步骤: 连接MySQL数据库 判断是否连接成功 选择数据库 设置字符集 准备SQL语句 向MySQL服务发送SQL语句 解析处理结果集 释放结果集,关闭数据库连接 */ ...