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 相关文章推荐
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Vue使用NProgress进度条的方法
Sep 21 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 字符串分割和比较
2009/10/06 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js opener的使用详解
2014/01/11 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python机器学习之神经网络(一)
2017/12/20 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
安全协议书范本
2014/04/21 职场文书
中学生操行评语大全
2014/04/24 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
就业意向协议书
2015/01/29 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang