解决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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Vuex 快速入门(简单易懂)
Sep 20 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 fopen下载远程文件的函数
2016/11/18 PHP
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
AngularJS基础知识
2014/12/21 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
javascript如何创建对象
2016/08/29 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python opencv之SURF算法示例
2018/02/24 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python代码如何注释
2020/06/01 Python
Python requests接口测试实现代码
2020/09/08 Python
详解Python流程控制语句
2020/10/28 Python
建筑工程自我鉴定
2013/10/18 职场文书
出纳岗位职责范本
2013/12/01 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
go xorm框架的使用
2021/05/22 Golang
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers