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


Posted in Javascript onAugust 06, 2016

最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论。这里使用了动态加载的<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事件的原因及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
关于js类的定义
Jun 28 Javascript
bootstrap table小案例
Oct 21 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 #Javascript
深入理解JS DOM事件机制
Aug 06 #Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 #Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 #Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 #Javascript
JS获取和修改元素样式的实例代码
Aug 06 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
javascript 闭包疑问
2010/12/30 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python检测生僻字的实现方法
2016/10/23 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python实现查找所有程序的安装信息
2020/02/18 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
八年级物理教学反思
2014/01/19 职场文书
学生干部培训方案
2014/06/12 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python