动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论。这里使用了动态加载的点击加载评论。
然后再写
$(“.get_comment).click(function(){
//响应事件逻辑
})
发现click事件并不会触发,使用控制台侦听也木有错误。百思不得其解时,
因为我在以前做搜狐家居商城的运费管理时,也曾遇到,因此将焦点落在动态加载上。
记得当时本人用的是行内事件,在动态加载时用的是行内事件。如 var oBtn = '删除'; 其实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事件的原因及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...相关推荐
- 动态生成的DOM不会触发onclick事件的原因及解决方法
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='g ...
- android input 点击事件失效,在textinputedittext android上不会触发onclick事件
我有以下文本输入文本 android:focusableInTouchMode="true" android:id="@+id/from_textinput" ...
- 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法 参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
- [Android]手动触发OnClick事件
一.实现代码 1.1 将下面代码写在类中,注意不是方法内部! OnClickListener OnClickEvent = new OnClickListener(){ ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
- 使用 ADOX 将 Table 添加到 Catalog 时报“类型无效”的原因和解决方法
http://blog.csdn.net/kfhzy/article/details/6020283 http://blog.csdn.net/kfhzy/article/details/602054 ...
- 使用IDEA时快捷键无效的原因和解决方法
使用IDEA时快捷键无效的原因和解决方法 今天尝试用IDEA全局搜索时(Ctrl+Shift+F),发现无效. 浏览了一些博客,然后发现大家的回答出奇的一致.所以肯定是了: IDEA快捷键失效的原因, ...
- ThoughtWorks.QRCode 生成QR二维码时提示“索引超出了数组界限”的原因和解决方法
ThoughtWorks.QRCode 生成QR二维码时提示"索引超出了数组界限"的原因和解决方法 参考文章: (1)ThoughtWorks.QRCode 生成QR二维码时提示& ...
- 触发onclick事件元素的获取
onclick触发元素获取 自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 <script> var ...
最新文章
- VS013的单元测试去哪里了
- mysql拉荐_荐 一步一步教你MySQL主从复制读写分离
- 小微商户申请php,微信小微商户申请入驻 - osc_r8q2esik的个人空间 - OSCHINA - 中文开源技术交流社区...
- 调用微信和支付宝调三方接口扫描二维码?
- Xcode 9 新建的工程如何支持 iOS 8
- ios 获取沙盒文件名_获取IOS各种沙盒路径的方法
- 『设计模式』设计模式--原型模式
- .NET开发框架(六)-架构设计之IIS负载均衡(视频)
- 【C语言】在线OJ题 BC99-BC119-牛客网编程初学者入门训练
- 中国特种可注射仿制药市场趋势报告、技术动态创新及市场预测
- Linux设备中的并发控制
- CSS-解决inline-block空隙的最好方法
- excel自动调整行高和设置默认行高
- 互联网+创新创业大赛反思总结
- 诺奖经济大师,数学天才赌徒,和“神秘的股市财富公式”
- dell R720 单盘raid0配置
- Ian Goodfellow回忆GAN诞生故事:几杯啤酒喝出“20年来最酷的深度学习想法”
- 流程设计建模方法:流程的需求梳理之流程级别梳理
- AppleStore下载量查看
- 思维导图ubuntu_XMind for Linux - 思维导图 | linux软件
热门文章
- docker安装,配置,基本命令的学习
- iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
- 华硕FL5900U如何关闭ahci_华硕AX86U、TP XDR6060测试MUMIMO效果,AX86U无效果
- python超市售货统计程序_零售超市项目销售数据分析(Python)
- GWAS(1)——文件格式及linux上的转换
- 全新蒙迪欧主推2.3 定价将为18.98-22.98万
- VS2010~VS2015~VS2019颜色字体设置策略
- 【ACM之旅】球队排名
- 【每日一题】牛客--扑克牌大小
- python逻辑流程图_Python大牛历时一个月打造的Python系统学习流程图,超详细!