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. ajax 传递文件成功时 jQuery提示parsererror错误

    后台返回值类型 改为:PrintWriter out = response.getWriter();String jsonStr = "{\"success\":\&qu ...

  2. Apache安装之后，在浏览器输入ip无法访问

    博主本来在linux下面配置安装了apache,然后用浏览器输入ip却无法访问 就一直在想是不是dns无法解析的问题,最后才发现原来是防火墙的原因, 在linux下面 service iptables ...

  3. POJ3246

    Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same ...

  4. Ubuntu 14.10 配置JDK + J2EE

    本文仅作为本人在Ubuntu 14.10下安装JDK + J2EE的一个记录: 安装JDK 从Oracle的官网下载jdk-7u75-linux-x64.tar.gz 将jdk-7u75-linux- ...

  5. 剑指offer题目练习一

    看见了一道二维数组找数的题,已排好序的数组(从左至右从上到下,都是由小变大的)让找数,瞬间就出思路了,并没有必要去看他的解释,两次二分就搞定了. #include<cstdio> #inc ...

  6. Java 虚拟机结构分析

    本博文主要介绍了JVM(Java Virtual Machine)的组成部分以及它们内部的工作机制和原理.需要注意的是,虽然平时我们用的大多是Sun(现已被Oracle收购)JDK提供的JVM,但是J ...

  7. Eclipse 修改字符集---Eclipse教程第02课

    默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: 在菜单栏选择 Window ...

  8. LDAP操作的两种方案

    最近由于项目需要研究了一下LDAP相关知识,感觉对没接触过的人来说还是有点坑的,所以记录下来给大家分享. 由于是第一次接触,就在网上搜了一些相关的文章,照着示例代码测试,却怎么也连不上LDAP服务器, ...

  9. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  10. 《Cracking the Coding Interview》——第13章：C和C++——题目3

    2014-04-25 19:42 题目:C++中虚函数的工作原理? 解法:虚函数表?细节呢?要是懂汇编我就能钻的再深点了.我试着写了点测大小.打印指针地址之类的代码,能起点管中窥豹的作用,从编译器的外 ...