最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是:

移动端遇到一个项目,是一个列表的侧滑栏,在我这里用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事件委托( 适用于给动态生成的脚本元素添加事件)的更多相关文章

  1. JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  2. jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelec ...

  3. 动态生成的dom元素绑定事件

    要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...

  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  5. JQ 为未来元素添加事件处理器—事件委托

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...

  6. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  7. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  8. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  9. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

随机推荐

  1. iOS 8 UIAlertController 和 UIAlertAction

    将alertView 和 actionSheet 封装在UIAlertController 里面化整为零,使开发者更便利 当我们一味的追求高内聚,低耦合的时候,伟大的苹果反其道而行之,这也告诉了我们一 ...

  2. CENTOS6.6下mysql5.7.11带boost和不带boost的源码安装

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn Mysql5.7版本更新后有很多变化,比如json等,连安装都有变化 ...

  3. [原创]Oracle 12c的备份和恢复策略

    Oracle 12c的备份和恢复策略(RMAN备份[开启归档/控制文件/数据文件/归档日志]): 备份策略: * 每半年做一个数据库的全备份(包括所有的数据和只读表空间) * 每周做一次零级备份 * ...

  4. 测试同学难道要写一辈子的hello world?

    最近我们在测试团队内推行自动化用例责任制,大致的意思是:我们安排培训资源,提供技术支持和一对一辅导,要求每一个自主选择了自动化和接口测试发展通道的同学必须让自己负责的项目自动化用例覆盖率有所提升. 后 ...

  5. C++学习笔记第二天:几个知识点

    第一天,囫囵吞枣的把C++的基本概念撸了一遍 有几个地方不太理解,今天有针对性的学习一下 1.namespace 自定义命名空间,主要为了解决类.函数和全局变量的命名冲突问题. 调用某个命名空间里的符 ...

  6. Qt 5.9.4 如何静态编译和部署?

    Qt 5.9.4 如何静态编译和部署? MSVC2015 x86 静态编译 Qt 部署静态库 VS2015 部署静态库 1. MSVC2015 x86 静态编译 1.1 Qt 官网下载最新源代码 立即 ...

  7. 《android开发艺术探索》读书笔记(九)--四大组件

    接上篇<android开发艺术探索>读书笔记(八)--WindowManager No1: 四大组件除了BroadcastReceiver,其他三种组件都必须在AndroidManifes ...

  8. (转载)SVM-基础(二)

    支持向量机: Support Vector  by pluskid, on 2010-09-10, in Machine Learning     52 comments 本文是"支持向量机 ...

  9. 【天坑】ASP.net WebAPI跨域调用问题

    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...

  10. Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 公司需要人.产品.业务和方向,方向又要人.产品.业务和方向,方向… 循环』 本文提纲一. ...