jquery中动态新增的元素节点无法触发事件解决办法

比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。

其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下:

为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码:

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">aaa1</li>
 <li class="liLabel">aaa2</li>
 <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
</script>

方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:
$('.liLabel').live('click', function(){
 alert('OK');
});

方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:
$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者:
$("body").on('click','.liLabel',function(){
 alert('OK')
});

现在再试试,肯定就没问题了。

时间: 2024-08-02 20:27:34

jquery中动态新增的元素节点无法触发事件解决办法的相关文章

解决jquery中动态新增的元素节点无法触发事件问题的两种方法_jquery

比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为"reply",如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jquery中动态新增的元素节点无法触

关于jquery中动态增加select,事件无效的快速解决方法_jquery

近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

jQuery给动态添加的元素绑定事件的方法

 这篇文章主要介绍了jQuery给动态添加的元素绑定事件的方法,对比了jQuery中事件绑定的方法以及常见版本使用绑定的区别,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给

jquery html动态添加的元素绑定事件详解_jquery

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="testdiv"> <ul> <li name="apple">apple</li> <li name="

ios-iOS中在类别中动态新增了的可变字典属性变成了不可变字典

问题描述 iOS中在类别中动态新增了的可变字典属性变成了不可变字典 想在category中新增个属性来用,创建的可变字典属性,也做了相关关联,结果用不了setobject方法,打印出来一看发现变成了不可变字典类型,希望有大神帮我看看哪里出问题了: static void *myAllPropertiesDicKey = &myAllPropertiesDicKey; @implementation FatherClass (Category) //add setter and getter me

treeview-C# TreeView 单击选中节点不能触发事件

问题描述 C# TreeView 单击选中节点不能触发事件 private void LoadList() { if (trvGroup.Nodes.Count == 0) { lvContact.Clear(); return; } if (trvGroup.SelectedNode.Index >=0) { string strGroup = trvGroup.SelectedNode.Text; try { lvContact.Clear(); lvContact.Columns.Add(

JPA 不在 persistence.xml 文件中配置每个Entity实体类的2种解决办法

原文:JPA 不在 persistence.xml 文件中配置每个Entity实体类的2种解决办法 在Spring 集成 Hibernate 的JPA方式中,需要在persistence配置文件中定义每一个实体类,这样非常地不方便,远哥目前找到了2种方法.   这2种方式都可以实现不用persistence.xml文件,免去每个Entity都要在persistence.xml文件中配置的烦恼,但是这种方式Entity实体类的主键字段注解@ID要放到 getXXX()方法上,否则不认.   方式1

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法_AngularJS

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法_jquery

 如果版本是: 1.3.1 IE无法显示关闭按钮 如果版本是: 1.3.4 IE6无法显示关闭按钮 解决办法: Version: 1.3.1 打开fancybox.css 注释掉此行: .fancybox-ie #fancybox-close { background: transparent; filter: progid : DXImageTransform.Microsoft.AlphaImageLoader ( src = 'images/fancy_close.png', sizing