解决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 事件对象的实现
Jul 13 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Element中Slider滑块的具体使用
Jul 29 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+MySql编写聊天室
2006/10/09 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
js 异步处理进度条
2010/04/01 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
windows下python安装小白入门教程
2018/09/18 Python
Django REST framework视图的用法
2019/01/16 Python
Python3多线程基础知识点
2019/02/19 Python
学习python的前途 python挣钱
2019/02/27 Python
Python实现最大子序和的方法示例
2019/07/05 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
金融专业毕业生自荐信
2014/06/26 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书