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


Posted in Javascript onOctober 30, 2015

比如做一个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')
});

现在大家可以尝试尝试,是不是问题已经得到解决了,希望这篇文章能够真正的帮助大家。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
You might like
php记录日志的实现代码
2011/08/08 PHP
php查询ip所在地的方法
2014/12/05 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
JS之相等操作符详解
2016/09/13 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python re模块介绍
2014/11/30 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Django--权限Permissions的例子
2019/08/28 Python
keras多显卡训练方式
2020/06/10 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
音乐器材管理制度
2014/01/31 职场文书
大学同学会活动方案
2014/08/20 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
企业年会祝酒词
2015/08/11 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android