关于动态生成dom绑定事件失效的原因及解决方法

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下:

1. 事件失效的原因:

(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了

(2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到的,因为网页只会执行一次初始化绑定,之后动态生成的dom元素也是监测不到的。

2. 解决办法:

(1)在每一个动态生成的地方都再绑定多一次事件,比如这个博客里面的例子

(2)把bind改用live,因为live是实时监测的,对于新增的dom元素也是有效的(因为不断去绑定、判断,所以可能会影响Web性能问题)

(3)把bind改用delegate,因为delegate是实时监测的。

(4)在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。

3. 关于最近遇到的事件失效的原因:在原本的网页中(代码可见https://github.com/UFOwl/ife/tree/master/stage02/task16),我想要获取table里面动态生成的删除按钮,帮删除按钮绑定删除时间,可是删除事件失效,因为删除按钮是动态生成的,初始化事件绑定的时候,获取到的table里面的button已经是空的,所以绑定的一直都是空元素,所以点击button按钮的时候一直没有反应。

4. 最后的解决办法:先获取table,然后再绑定table的click事件(因为table是在原本已经存在的dom元素),然后当点击事件触发的时候再捕获事件的target(比如点击table里面的button,这个时候因为已经动态生成button并append进去table里面了,所以button是存在的,此时target指的是button),然后再进行相应的操作。

注意:在这里注意两个问题:

(1)table里面的元素是已经添加进入table里面了的,所以点击那个button的时候,e.target获取到的就是button

(2)为什么已经将button这些元素添加进入table里面,可是还是没能获取到呢,因为是init()这个函数初始化的时候获取table里面的button,可是此时还未进行任何操作,所以获取到的就是空,所以没绑定任何元素。

上面需要注意的两个问题要分清楚,这个是问题的关键。

5.关于bind:每次绑定事件之后事件会一直绑定着,除非用unbind解绑之后再重新绑定,要不然事件会一直存在,所以这就是为什么在做项目的时候,有时候ajax请求的结果会出现1,2,4,8这样叠加,是因为如果用了bind,每次触发事件都会绑定一次操作,所以触发第一次的时候,ajax请求一次;第二次的时候,ajax请求1+1=2次;第三次就是1+2+1=4次;第四次就是1+2+4+1=8次,以此类推。所以如果利用bind绑定事件的话,要先unbind解绑元素原本有的事件再绑定事件,才不会导致ajax请求多次。

以上这篇关于动态生成dom绑定事件失效的原因及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-08-05

JQuery中DOM实现事件移除的方法

本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

DOM 中的事件处理介绍

该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理函数,以用来提供当前事件相关的一些信息. 事件注册 根据 DOM 2 Events 中描述,节点使用 'addEventListener'

JS中dom0级事件和dom2级事件的区别介绍

dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们

Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码

在调试功能模块时候,发现怎么用什么方法都无法在infowindow里面添加的div进行绑定事件处理.郁闷啊!上网搜了好多方法也没用, 后来想想还是查了一下官方的API,发现了google.maps.InfoWindow下面的Events里面有个domready事件 官方解释: This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monito

DOM 事件的深入浅出(一)

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级

JQuery为页面Dom元素绑定事件及解除绑定方法

1.绑定事件 复制代码 代码如下: $('#id').bind("click",function(){ ... }) 可一次性绑定多个事件 复制代码 代码如下: $('#id').bind("click mouseover mouseout",function(){ ... }) 2.解除绑定 复制代码 代码如下: $('#id').unbind("click") 3.绑定一次 复制代码 代码如下: $('#id').one("clic

DOM事件探秘篇

1.事件流 时间流--- 描述的是从页面中接受事件的顺序. (1)事件冒泡流. 事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). (2)事件捕获流. 不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件. 2.JS事件探索 1.HTML事件处理程序 -- 直接写在html标签里面的js触发语句. 2.DOM0级事件处理程序. 把一个函数赋值给一个事件的处理程序属性,用的比较多的方法,简单,跨浏览器的优势. 3.DOM2级事件处

DOM 事件的深入浅出(二)

在DOM事件的深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法. 那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象.我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性. Event对象 Event对象其实是一个事件处理程序的参数,当调用事件时,我们只需要将

动态生成的DOM不会触发onclick事件的原因及解决方法

最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment'>点击加载评论</span>. 然后再写 $(".get_comment).click(function(){ //响应事件逻辑 }) 发现click事件并不会触发,使用控制台侦听也木有错误.百思不得其解时, 因为我在以前做搜狐家居商城的运费管理时,也曾遇到,

vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发

A标签触发onclick事件而不跳转的多种解决方法

在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为: 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果. 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除.因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件. 代码如下: 复制代码 代码如下: <script type="text/javascript"> function

关于jquery中动态增加select,事件无效的快速解决方法

近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

jQuery动画出现连续触发、滞后反复执行的解决方法

本文实例讲述了jQuery动画出现连续触发.滞后反复执行的解决方法.分享给大家供大家参考.具体分析如下: jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1.在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout) 2.在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop) jquery sto

基于jquery trigger函数无法触发a标签的两种解决方法

起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ 的 $('#a').trigger('click') 居然不起作用,遂百度之,总结两种方法如下: (原因:JQ 的 trigger() 方法确实无法触发 a 标签的转跳动作.) 1:JQ 方法: 对目标 a 标签内部新增一个 span 标签 ,然后给 span 标签绑定 trigger('click') 事件. $('#a').html('<span></span>').children().trigger('cli

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

AngularJS实现给动态生成的元素绑定事件的方法

本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

js触发asp.net的Button的Onclick事件应用

在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制的麻烦. asp.net带来便利的同时,也带来一个问题.在实际应用中一个页面存在多个按钮的情况并不多.用户习惯于在输入框输入内容之后,直接按回车就提交表单了.由于asp.net采用的是事件驱动模式,所以默认用户按回车并没有触发按钮的onclick事件.用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页