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

jQuery live()方法是给所有匹配的元素附加一个事件处理函数，即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说：

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

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

代码如下:

$('.clickme').bind('click', function() { alert(www.jb51.net); });

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

代码如下:

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

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

代码如下:

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

这样点击新增的元素，它依然能够触发事件处理函数。
事件委托
live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。
在我们的例子中，当点击新的元素后，会依次发生下列步骤：
1、生成一个click事件传递给 <div> 来处理。
2、由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上。
3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live() 绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。
6、这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
7、如果找到了匹配的元素，那么调用原始的事件处理函数。
8、由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
以上就是对jQuery向动态生成的内容添加事件响应jQuery live()方法的详细介绍，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • jQuery为DOM动态追加事件的方法

    处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞 最初是这样写的: $(".btn-open").on("click", function () { alert($(this).text()); }) 当然这样是不起作用的,因为在document reday后,.btn-open 这个元素根本还不存在呢,列表没绑定,事件当然也帮不上的!

  • jquery 新建的元素事件绑定问题解决方案

    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. 复制代码 代码如下: <table> <tbody> <tr> <td>这行原来就有</td> <td><buttonclass="del">删除</button>&l

  • JQuery为页面Dom元素绑定事件及解除绑定方法

    1.绑定事件 复制代码 代码如下: $('#id').bind("click",function(){ ... }) 可一次性绑定多个事件 复制代码 代码如下: $('#id').bind("click mouseover mouseout",function(){ ... }) 2.解除绑定 复制代码 代码如下: $('#id').unbind("click") 3.绑定一次 复制代码 代码如下: $('#id').one("clic

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

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

    jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: <body> <div class="clickme">Click here</div> &

  • jquery 给动态生成的标签绑定事件的几种方法总结

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: <body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div>

  • jQuery操作动态生成的内容的方法

    本文实例讲述了jQuery操作动态生成的内容的方法.分享给大家供大家参考,具体如下: 由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取: document.getElementById("xxx").value 对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()

  • JS实现为动态创建的元素添加事件操作示例

    JS实现为动态创建的元素添加事件操作示例

    本文实例讲述了JS实现为动态创建的元素添加事件操作.分享给大家供大家参考,具体如下: html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点 具体实现可以在demo中看到 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS实现为动态创建的元素添加事件

  • jQuery动态生成的元素绑定事件操作实例分析

    jQuery动态生成的元素绑定事件操作实例分析

    本文实例讲述了jQuery动态生成的元素绑定事件操作.分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来总结一下这个问题的始末,温故而知新. 先看下click绑定事件的效果. <div> <p>a</p> <p>b</p> <p>c</p> <

  • 详解Java JDK动态代理

    今天来看看Java的另一种代理方式--JDK动态代理 我们之前所介绍的代理方式叫静态代理,也就是静态的生成代理对象,而动态代理则是在运行时创建代理对象.动态代理有更强大的拦截请求功能,因为可以获得类的运行时信息,可以根据运行时信息来获得更为强大的执(骚)行(操)力(作). 我们还是以上一个例子为例,这里的IStars接口和Stars类都不需要修改,只需要修改代理类. 创建JDK动态代理需要先实现InvocationHandler接口,并重写其中的invoke方法,具体步骤如下: 1. 创建一个类

  • 详解Java Cglib动态代理

    今天来介绍另一种更为强大的代理--Cglib动态代理. 什么是Cglib动态代理? 我们先回顾一下上一篇的jdk动态代理,jdk动态代理是通过接口来在运行时动态创建委托类的代理对象,但是跟静态代理一样有一个缺点,就是必须和委托类实现相同的接口,当接口数量增加时,便需要增加代理类的数量才能满足需求,而且如果委托类是别人写的,而且没有实现任何接口,那么jdk动态代理就有些力不从心了. 这时候Cglib动态代理就脱颖而出了,Cglib并不依赖接口,可以直接生成委托类的代理对象,而且可以代理委托类的任意

  • Java详解ScriptEngine接口动态执行JS脚本

    目录 简介 Eval(String script) 描述 实例代码 Put() and Get() 描述 实例代码 CompiledScript 描述 实例代码 Bindings 描述 实例代码 大多的方法描述都来自于jdk11API帮助文档,由于是机翻,可能有些难以理解,大家多多担待 简介 首先来看一下JDK11API文档中对ScriptEngine的描述 模块 java.scripting 软件包 javax.script Interface ScriptEngin public inter

  • 详解IOS开发中生成推送的pem文件

    详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

  • 详解JSP中使用过滤器进行内容编码的解决办法

    详解JSP中使用过滤器进行内容编码的解决办法

    详解JSP中使用过滤器进行内容编码的解决办法 问题 当通过JSP页面,向数据库中插入记录的时候,可能因为JSP页面编码原因,导致插入到数据库中的新纪录出现乱码.因此需要对JSP页面中的内容进行编码操作,从而保证与数据库中的编码一致. 解决方案 使用JSP中过滤器进行处理.处理步骤如下 1.新建一个servlet,使其实现javax.servlet.Filter接口 2.修改Servlet/JSP Mapping URL ,将其改为 /EncodingFilter 3.在EncodingFilte

随机推荐