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. C语言字符篇（四）字符串查找函数

      #include <string.h>   char *strchr(const char *s, int c);   The strchr() function returns a ...

  2. C语言基础篇（二）运算符

    导航: 2.1 算数运算符 2.2 逻辑运算符 2.3 位运算 2.4 赋值运算 2.5 内存访问符号 ----->x<------------->x<------------ ...

  3. POJ 3581 三段字符串(后缀数组)

    Sequence Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7923   Accepted: 1801 Case Tim ...

  4. 笔记-python-lib-lxml

    笔记-python-lib-lxml 1.      lxml简介 lxml是一个实现解析网页文件的库,python中自带有解析库,但没有lxml方便好用. The lxml XML toolkit ...

  5. 20145202马超 《Java程序设计》 实验一 实验报告

    一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 二.实验内容 1.完成在Windows环境下对IDEA的配置: 2.实现求正整 ...

  6. P1418 选点问题（黑白染色）

    P1418 选点问题 题目描述 给出n个点,m条边,每个点能控制与其相连的所有的边,要求选出一些点,使得这些点能控制所有的边,并且点数最少.同时,任意一条边不能被两个点控制 输入输出格式 输入格式: ...

  7. springboot遇见问题总结

    今天开始学习创建springboot项目 问题1: 产生异常: 创建项目目录: demo代码: 代码Controller import org.springframework.web.bind.ann ...

  8. PJMEDIA之录音器的使用（capture sound to avi file）

    为了熟悉pjmedia的相关函数以及使用方法,这里练习了官网上的一个录音器的例子. 核心函数: pj_status_t pjmedia_wav_writer_port_create ( pj_pool ...

  9. 剑指Offer - 九度1361 - 翻转单词顺序

    剑指Offer - 九度1361 - 翻转单词顺序2013-11-23 02:45 题目描述: JOBDU最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fi ...

  10. USACO Section2.1 Healthy Holsteins 解题报告 【icedream61】

    holstein解题报告 --------------------------------------------------------------------------------------- ...