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 相关文章推荐
js传值 判断
Oct 26 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
PHP实现的进度条效果详解
2016/05/03 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
Python计算字符宽度的方法
2016/06/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python 判断奇数偶数的方法
2018/12/20 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
医药营销个人求职信
2014/04/12 职场文书
党校学习心得体会范文
2014/09/09 职场文书
防汛通知
2015/04/25 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server