jQuery为DOM动态追加事件
2024-08-26 07:32:24
处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接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上。
以前一直没有仔细的阅读文档,对这一块模棱两可,今天弄清楚并记录下来。
提醒自己:请阅读文档,然后再去怀疑人生!
最新文章
- 关于Web服务器的认识
- mysql插入速度
- contiki-定时器etimer
- C# Image Resizer
- .NET垃圾回收:非托管资源,IDispose和析构函数的结合
- oracle DBA坚持写博客的7大理由
- nodejs 实现机制
- Yii之权限管理扩展 srbac
- c语言 快速排序---归并排序----堆排序
- maven部署命令
- 2015-12-1 Visual Studio 2015 Update 1发布
- 国内阿里Maven仓库镜像及自己收集镜像库
- 机器学习 - 正则化L1 L2
- centos安装实用总结
- Elasticsearch实践(二):搜索
- react学习笔记2
- 根据IP查地理位置信息
- C# 中web如何定时同步数据
- onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生
- gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'
热门文章
- ssm框架整合之Spring4+SpringMVC+Mybaties3之配置文件如何配置及内容解释--可直接拷贝使用--不定时更改之2017/4/29
- SpringMVC前后台数据传递中Json格式的相互转换(前台显示格式、Json-lib日期处理)及Spring中的WebDataBinder浅析
- ios编译出错:UIButton.h' has been modified since the precompiled header UIKit.pcm' was built
- 用jQuery获取table中行id和td值
- 在struts2.3.4.1中使用注解、反射、拦截器实现基于方法的权限控制
- slf4j日志框架
- MySQL数据库篇之完整性约束和表关系
- flask 启动
- 读书笔记 Week6 2018-4-12
- WPF Shader 正片叠底