JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是:
移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。研发也美滋滋的开始开发。
但是,好景不长。。。
研发加了ajax事件后,我的交互效果有部分受了影响!
一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。我就回来了。
后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名?
回:加着呢啊!我一看模拟器,确实加着呢。但是看源码,没有,因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有执行。
扫噶,定位到问题,就好解决了。
之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。今天逮到了就不能放过!
————————-----------------------------------------------------------非故事分割线------------------------------------------------------------------————————
jq写了点击事件,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。
正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah)
jquery中动态新增的元素节点无法触发事件问题(同上)
解决方法:
值得注意的是:亲测此方法无效,可能是我用的jq的版本太高了,1.9多,已经不支持这个方法了
第二个方法:
但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。
王者方法:on
//模拟多个事件!成功
$(".hah").on('click','.shijian1',function(){
alert('on-OK')
});
$(".hah").on('click','.shijian2',function(){
alert('on-OK-多个事件')
});
JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)的更多相关文章
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- jQuery为动态生成的select元素添加事件的方法
项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelec ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- 动态生成的dom元素绑定事件
要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...
- JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
随机推荐
- 联想服务器RD450 配置RAID5
实验环境: 1.服务器型号 ThinkServer RD450 2.四块1TB普通SATA硬盘 实验目的: 配置RAID 5 ,搭建公司文件共享服务器使用. 标注:本教程四块硬盘全做RAID 5,如果 ...
- jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................
jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................
- List&Map&Set的操作和遍历
Java的三大集合即:Set.List.Map. Set:代表无序.不可重复的集合,常用的有HashSet(哈希表实现).TreeSet(红黑树实现): List:代表有序.可以重复的集合,比较常用的 ...
- LNMP架构介绍 MySQL安装 PHP安装 Nginx介绍
- UNIX环境编程学习笔记(24)——信号处理进阶学习之信号集和进程信号屏蔽字
lienhua342014-11-03 1 信号传递过程 信号源为目标进程产生了一个信号,然后由内核来决定是否要将该信号传递给目标进程.从信号产生到传递给目标进程的流程图如图 1 所示, 图 1: 信 ...
- apt 之 最强技能:【欺骗】,文雅点【偷梁换柱】!
apt这种软件包管理系统,有个最大特点是:只照本宣科,而不管实际情况. 所以,我们用户就可以利用这一点,来欺骗它,达到我们的目的. ------------------------------好了,现 ...
- RSS 使用前详解
您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML XML / XML 命名空间 什么是 RSS? RSS 指 Really Simple Syndica ...
- Docker Engine和Docker Machine介绍
https://blog.csdn.net/u012460749/article/details/78751128
- less语法(一)变量与extend
摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...
- matlab矩阵内存预分配
matlab矩阵内存预分配就意味着,划定一个固定的内存块,各数据可直接按"行.列指数"存放到对应的元素中.若矩阵中不预配置内存.则随着"行.列指数"的变大.MA ...