JQuery事件委托(适用于给动态生成的脚本元素添加事件)

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

移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。研发也美滋滋的开始开发。

但是，好景不长。。。

研发加了ajax事件后，我的交互效果有部分受了影响！

一个小姑娘，在一群大老爷们研发堆里，对着昏暗的电脑和看不太懂的后台代码，改了半天。最后没解决。我就回来了。

后来就找共同点，发现有个类名控制的交互都不能实现，最后去问研发，你是不是没加上我的类名？

回：加着呢啊！我一看模拟器，确实加着呢。但是看源码，没有，因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有执行。

扫噶，定位到问题，就好解决了。

之所以整理成随笔，是因为我之前没遇到过这个问题，听过事件委托机制，但是根本没研究过不知道适用于什么样的bug场景。今天逮到了就不能放过！

jq写了点击事件，是通过获取元素的类名被点击后执行对应方法，但是研发套完模板，他会把所有的结构先清空，导致jq根本找不到那个元素，所以事件就不得执行了。

正规点的说：JS异步加载,JQ事件不被执行解决方法（百度的标题，hah）

jquery中动态新增的元素节点无法触发事件问题（同上）

解决方法：

值得注意的是：亲测此方法无效，可能是我用的jq的版本太高了，1.9多，已经不支持这个方法了

第二个方法：

但是缺点是：给一个元素添加多个事件委托机制时，他就挂了。

$("div").delegate("button","click",function(){
 console.log("start")
})

div下面的button点击的时候,打印start,这个button可以是动态生成的

王者方法：on

赞 (0)

相关推荐

  • JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法.分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作. 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • jQuery事件委托代码实践详解

    javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <table> <tr><td id="targetTd"></td><td></td><td></td&

  • jQuery动态追加页面数据以及事件委托详解

    jQuery动态追加页面数据以及事件委托详解

    我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container

  • 浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

  • jQuery的事件委托实例分析

    事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</title> <style type="text/css"> table{ width:300px; height:60px; backgro

  • jQuery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理 事件委托将事件监听绑定在目标元

  • jQuery代码优化 事件委托篇

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一

  • jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <div id="box"> <p id="btn">我是按钮</p> </div> </body> style: .hid{ display:none; } script: $('#box').click(functio

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

  • JQuery事件委托(适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. 但是,好景不长... 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天.最后没解决.我就回来了. 后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名? 回:加着呢啊!我一看模拟

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

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • C#动态生成按钮及定义按钮事件的方法

    本文实例讲述了C#动态生成按钮及定义按钮事件的方法.分享给大家供大家参考.具体实现方法如下: 1.后台生成input的button按钮 复制代码 代码如下: HtmlGenericControl control = new HtmlGenericControl("input"); control.Attributes.Add("type", "button"); control.Attributes.Add("onclick"

  • JS实现为动态创建的元素添加事件操作示例

    JS实现为动态创建的元素添加事件操作示例

    本文实例讲述了JS实现为动态创建的元素添加事件操作.分享给大家供大家参考,具体如下: html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点 具体实现可以在demo中看到 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS实现为动态创建的元素添加事件

  • JS脚本实现动态给标签控件添加事件的方法

    本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • JS实现动态给标签控件添加事件的方法示例

    本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 通过原生JS实现为元素添加事件的方法

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

  • jquery弹窗插件colorbox绑定动态生成元素的方法

    colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法是这样的: 复制代码 代码如下: <a class="test" href="test.jpg" titl

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

随机推荐