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

最近朋友在做一个项目的时候，遇到动态加载微博内容，然后点击“展开评论”后获取该微博的所有评论。这里使用了动态加载的<span mid='123456789′ class='get_comment'>点击加载评论</span>。

然后再写

$(“.get_comment).click(function(){

//响应事件逻辑

})

发现click事件并不会触发，使用控制台侦听也木有错误。百思不得其解时，

因为我在以前做搜狐家居商城的运费管理时，也曾遇到，因此将焦点落在动态加载上。

记得当时本人用的是行内事件，在动态加载时用的是行内事件。如 var oBtn = '<a onclick="Freight.delete_curr_citys();" href="javascript:void(0);">删除</a>'; 其实Freight为对象.delete_curr_citys为此对象的一个方法。

当然也可以使用jquery的live()函数，重写响应逻辑：

$(“.get_comment”).live(‘click', function() {
var mid = $(this).attr(“mid”);
alert(mid);
});

这时候，jquery可以响应span 的click事件了。这里用到live函数委派事件，主要用于动态生成的HTML的事件响应。关于live()函数的作用，它最直观的好处在于可以一直 “监听”客户端浏览器操作，对于新增的DOM节点也会有效，而不需要重新绑定。也许是因为这个“监听”可能会不断的去绑定、判断，会造成web应用性能问题，大家可以根据项目的复杂性选择性使用。关于live函数，这里有非常详细的阐述：

定义和用法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法

$(selector).live(event,data,function)

参数 描述

event 必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到该函数的额外数据。

function 必需。规定当事件发生时运行的函数。

以上这篇动态生成的DOM不会触发onclick事件的原因及解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决给dom元素绑定click等事件无效问题的方法

    之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来. 同时加深对js事件处理机制的理解. 1. 事件被解绑 这种情况下一般不会导致click失效,但以下情况,click事件就失效了: $(function(){ $('.btn').unbind() }) $('.btn').click(function(){ //... }) 所以,click事件要有个好习惯: $(function(){ $('.btn').click(function(){

  • 动态生成的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会触发,切换后触底不会再次触发

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

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • 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动态设置图片时src不生效的原因及解决方法

    Vue动态设置图片时src不生效的原因及解决方法

    目录 原因分析 解决方法 import和require的区别 原因分析 在vue项目中动态设置img的src时,图片会加载失败.我们可以先看个例子. <template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-l

  • 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('

随机推荐