解决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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js中replace的用法总结
Dec 27 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
javascript读取RSS数据
2007/01/20 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python 将json数据提取转化为txt的方法
2018/10/26 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python  Django 母版和继承解析
2019/08/09 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python对XML文件的操作实现代码
2020/03/27 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
2015毕业生自我评价范文
2015/03/02 职场文书
大学生读书笔记大全
2015/07/01 职场文书
Python实现双向链表
2022/05/25 Python