jQuery为DOM动态追加事件的方法


Posted in Javascript onFebruary 16, 2017

处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞

最初是这样写的:

$(".btn-open").on("click", function () {        
alert($(this).text());      
})

当然这样是不起作用的,因为在document reday后,.btn-open 这个元素根本还不存在呢,列表没绑定,事件当然也帮不上的!

 然后是这样的:

$(".table").on("click", ".btn-open", function () {        
alert($(this).text());      
})

代码可以看得明白,找到.table 元素,给.btn-open 追加 click事件。一般来说这样就可以了。但是依然不行,我勒个去,我开始怀疑自己的记忆了。然后去找了下文档。

文档说:

事件处理只能绑定在当前被选中的元素上;而且,在您的代码调用.on()的时候,他们必须在页面文档中已经存在。

好吧,在document ready时,.table确实不存在,所以 还要继续改

$(document).on("click", ".btn-open", function () {        
alert($(this).text());      
})

终于可以工作了。

总结:

1.jQuery委托事件与直接绑定事件的区别:

$(“X”).on(“click”,function(){})

$(“X”).on(“click”,”选择X的子元素”,function(){})

2.事件处理只能绑定到当前存在的元素身上,也就是第一个选择器中的内容必须当前存在(这也是为什么第二段代码不起作用的原因,因为.table不存在),所以保险起见,可以直接绑定委托事件到document上。

以前一直没有仔细的阅读文档,对这一块模棱两可,今天弄清楚并记录下来。

以上这篇jQuery为DOM动态追加事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
javascript的var与let,const之间的区别详解
Feb 18 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
五个PHP程序员工具
2008/05/26 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
微信access_token的获取开发示例
2015/04/16 PHP
JavaScript的目的分析
2007/01/05 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
ajax异步请求详解
2017/01/06 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python线程指南详细介绍
2017/01/05 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
教师年终个人自我评价
2013/10/04 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
关于学习的演讲稿
2014/05/10 职场文书
委托证明范本
2014/11/25 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
演讲开场白台词大全
2015/05/29 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers