解决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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
浅析java线程中断的办法
Jul 29 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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
xajax写的留言本
2006/11/25 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
如何在php中正确的使用json
2013/08/06 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python验证身份证信息实例代码
2019/05/06 Python
python3获取当前目录的实现方法
2019/07/29 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
深入理解Python 多线程
2020/06/16 Python
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
Java程序员面试题
2013/07/15 面试题
高中同学会活动方案
2014/08/14 职场文书
励志演讲稿大全
2014/08/21 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android