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

移动端遇到一个项目,是一个列表的侧滑栏,在我这里用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. 配置可以通过http协议访问的svn服务器

    通过HTTP协议访问版本库是Subversion的亮点之一,这种方式具备许多svnserve服务器所没有的特性,使用上更加灵活. 关于mode_day_svn模块: 由于Subversion需要版本化 ...

  2. MySQL建立外键(Foreign Key)

    如果在最初建立表的时候就建立外键这样一般不会有什么问题,顺便说一下建立外键的时候,需要注意的地方. cascade方式在父表上update/delete记录时,同步update/delete掉子表的匹 ...

  3. Spring实战思维导图

    简要包含Spring的Bean.AOP.事务.容器等方面:

  4. mssql学习

    1.创建表和数据插入SQL 我们在开始创建数据表和向表中插入演示数据之前,我想给大家解释一下实时数据表的设计理念,这样也许能帮助大家能更好的理解SQL查询. 在数据库设计中,有一条非常重要的规则就是要 ...

  5. python爬虫循环导入MySql数据库

    1.开发环境 操作系统:win10    Python 版本:Python 3.5.2   MySQL:5.5.53 2.用到的模块 没有的话使用pip进行安装:pip install xxx     ...

  6. 手把手教你用.NET Core写爬虫

    写在前面 自从上一个项目58HouseSearch从.NET迁移到.NET core之后,磕磕碰碰磨蹭了一个月才正式上线到新版本. 然后最近又开了个新坑,搞了个Dy2018Crawler用来爬dy20 ...

  7. SpringMvc自动装配@Controller无效

    1.问题原因:SpringMvc驱动器没有扫描该Controller层 虽然配置了 <!-- 启用spring mvc 注解 --> <context:annotation-conf ...

  8. Git (gnome-ssh-askpass:3871): Gtk-WARNING **: cannot open display:

    在使用Git在客户端使用git push 命令提交文件到github时,出现报错 (gnome-ssh-askpass:): Gtk-WARNING **: cannot open display: ...

  9. c#IO的学习

    常见应用方面 一.路径的相关操作,如判定路径是否合法,路径类型,路径的特定部分,合并路径,系统文件夹路径等内容:二.相关通用文件对话框,这些对话框可以帮助我们操作文件系统中的文件和目录:三.文件.目录 ...

  10. nodejs爬虫初试---superagent和cheerio

    前言 早就听过爬虫,这几天开始学习nodejs,写了个爬虫 demo ,爬取 博客园首页的文章标题.用户名.阅读数.推荐数和用户头像,现做个小总结. 使用到这几个点: 1.node的核心模块-- 文件 ...