当前位置: 首页 > news >正文

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-多个事件')
});

  

相关文章:

  • Windows Phone开发(16):样式和控件模板 转:http://blog.csdn.net/tcjiaan/article/details/7367260...
  • 蓝牙App漏洞系列分析之三CVE-2017-0645
  • SSI框架整合
  • linux 常用命令
  • C语言描述
  • 应用缓存的常见问题及解决
  • 一个简单的例子演示:通过浏览器的滚动条来动态加载数据
  • Code Kata:螺旋矩阵 javascript实现
  • C++容器与算法
  • PostgreSQL在何处处理 sql查询之四十三
  • Tomcat建立多个应用(Web Server),多个主机,多个站点的方法
  • org.tmatesoft.svn.core.SVNCancelException: svn: E200015: authentication canc
  • Linux下查看Tomcat的控制台输出信息
  • 每天一句话
  • Android基础 使用ToolBar教你打造一个通用的标题栏
  • python3.6+scrapy+mysql 爬虫实战
  • 时间复杂度分析经典问题——最大子序列和
  • AngularJS指令开发(1)——参数详解
  • CSS魔法堂:Absolute Positioning就这个样
  • httpie使用详解
  • Java教程_软件开发基础
  • JSDuck 与 AngularJS 融合技巧
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • Node + FFmpeg 实现Canvas动画导出视频
  • npx命令介绍
  • php ci框架整合银盛支付
  • Python学习之路16-使用API
  • React-redux的原理以及使用
  • SwizzleMethod 黑魔法
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 学习HTTP相关知识笔记
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 终端用户监控:真实用户监控还是模拟监控?
  • 翻译 | The Principles of OOD 面向对象设计原则
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • # 数据结构
  • #if和#ifdef区别
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (十五)使用Nexus创建Maven私服
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .bat批处理(一):@echo off
  • .NET Core中的去虚
  • .NET 表达式计算:Expression Evaluator
  • .NET 跨平台图形库 SkiaSharp 基础应用
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NetCore项目nginx发布
  • .NET开源快速、强大、免费的电子表格组件