jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html
最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论。这里使用了动态加载的<span mid=’123456789′ class=’get_comment’>点击加载评论</span>。
然后再写
$(“.get_comment).click(function(){
//响应事件逻辑
})
,发现click事件并不会触发,使用控制台侦听也木有错误。百思不得其解时,将焦点落在动态加载上。
于是,使用jquery的live()函数,重写响应逻辑:
这时候,jquery可以响应span 的click事件了。这里用到live函数委派事件,主要用于动态生成的HTML的事件响应。关于live()函数的作用,它最直观的好处在于可以一直“监听”客户端浏览器操作,对于新增的DOM节点也会有效,而不需要重新绑定。也许是因为这个“监听”可能会不断的去绑定、判断,会造成web应用性能问题,大家可以根据项目的复杂性选择性使用。关于live函数,这里有非常详细的阐述:
定义和用法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
语法
$(<em>selector</em>).live(<em>event</em>,<em>data</em>,<em>function</em>)
参数 | 描述 |
---|---|
event | 必需。规定附加到元素的一个或多个事件。
由空格分隔多个事件。必须是有效的事件。 |
data | 可选。规定传递到该函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
jquery 动态生成html后click事件不触发原因的更多相关文章
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- Jquery 动态生成的元素绑定事件
使用 on方法 $("#id1").on("click","#id2",function(){}) 这里要注意的是#id1必须是原来就存在的 ...
- 用jquery动态生成的元素绑定事件
$(document).on("click",".class a",function(){ })
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- jq给动态生成的标签绑定事件的几种方法
经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...
随机推荐
- eclipse远程debug
由于一般比较正规项目,都会有好几个版本,有时候在测试版本的时候,一切都好好的,然后提交到其他版本之后会有各种各样的问题,这个时候如果不能快速准确的定位到问题,那么我们就需要用 eclipse远程deb ...
- retain,copy,assign及autorelease ,strong,weak
一,retain, copy, assign区别 1. 假设你用malloc分配了一块内存,并且把它的地址赋值给了指针a,后来你希望指针b也共享这块内存,于是你又把a赋值给(assign)了b.此时a ...
- html5,output标签应用举例
<form action="" id="myform" oninput="num.value=parseInt(num1.value)+pars ...
- Openstack的web管理端相关
openstack的web管理端技术方面要关注的问题. 同步?异步 先说浏览器的同步和异步,我们知道的浏览器可以使用ajax实现异步请求,就是浏览器在请求数据的时候,我们管理员还能对浏览器就行其他操作 ...
- Android之使用Volley框架在ListView中加载大量图片
1.listview 中的条目要用 Volley 中的 NetworkImageView,如果直接用ImageView也可以,但是要在getView方法中使用url地址设置为imageView的tag ...
- Dynamics AX 2012 R2 创建一个带有负载均衡的服务器集群
安装额外AOS的主要目的,是将它添加到集群,或用于创建批处理服务器. 1.创建集群服务器 这里,Reinhard使用上节Install An Additional AOS 中创建的AOS,来创建集群. ...
- python—面向对象编程
面向对象编程简单来说就是基于对 类 和 对象 的使用,所有的代码都是通过类和对象来实现的编程就是面向对象编程! 面向对象的三大特性:封装.继承.多态 首先创建一个类 #使用class创建一个Schoo ...
- JFrame中setDefaultCloseOperation的参数含义
实例1:一个空的java窗口 // JFrameDemo1.java import javax.swing.*; //使用Swing类,必须引入Swing包 public class JFra ...
- Walls(floyd POJ1161)
Walls Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7677 Accepted: 3719 Description ...
- WEB前端的原理及组成
1:认识WEB前端的组成部分和相关专业术语!具体的总结如下: