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 用户登录验证代码
Oct 29 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
完美的js图片轮换效果
Feb 05 Javascript
基于复选框demo(分享)
Sep 27 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
纯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
什么是MVC,好东西啊
2007/05/03 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery圆形统计图开发实例
2015/01/04 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
限期整改通知书
2015/04/22 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
小组组名及励志口号
2015/12/24 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python