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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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中的global
2014/08/19 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python实现字典依据value排序
2016/02/24 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
锅炉工岗位职责
2015/02/13 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript