JS动态append之后点击事件无效
2024-10-19 11:58:42
今天做项目用了append向HTML里面添加结构代码,代码添加之后,单击事件就没反应了。搞得我一脸懵逼,调了代码很久实在不行,我百度了一下才发现,append添加的节点单击事件是不会生效的。
原因:
原来append中的节点是在整个文档加载后才添加的,页面并不会为未来的元素初始化添加点击事件,所以使用这种方式动态添加的节点中的点击事件不会生效。
解决方法:
于是我只好改用事件代理来完成这次我的项目,把这次经历发在上面存一下档了,希望下次能记住。
HTML代码:
<main class="container" style="margin-top: 50px;margin-bottom: 50px">
<div class="row content" id="content">
</div>
</main>
append的代码:我把下面这段代码,加在content里面
$('#content').append(`
<div class="col-md-6">
<img src="img/cart.png" class="addcart">
</div>
<div class="col-md-6">
<img src="img/buy.png" class="buy">
</div>
`);
最终效果:
事件代理:
思路:因为最开始他们共同的父级content是在HTML结构中的,所以将两个单击事件代理给content,通过单击获得的class名来判断点击的是哪一个对象,再进行具体操作
$('#content').on('click',function (e) {
var target=e.target||e.srcElement;//获取当前点击的对象
var cls=target.className;//获取当前点击对象的class名
if(cls==='addcart'){//如果点击的是加入购物车
console.log('addcart')
}else if (cls==='buy') {//如果点击的是立即购买
console.log('buy')
}
});
最新文章
- bzoj4364: [IOI2014]wall砖墙
- IOS8解决获取位置坐标信息出错(Error Domain=kCLErrorDomain Code=0)(转)
- dedecms /plus/search.php SQL Injection &;&; Local Variable Overriding
- C头文件和源文件的连
- Environment Variables
- HttpClient(4.3.5) - ResponseHandler
- UltraEdit 列模式
- jquery 定时器
- String new赋值、直接赋值
- c++自带倒置数组函数
- JS判断doctype文档模式-document.compatMode
- html基础认识,高手别看
- ftk学习记(list篇)
- apache配置详解
- Python随笔--对象
- HDU 4825 Xor Sum(01字典树入门题)
- Teams UVA - 11609
- [转]小心C# 5.0 中的await and async模式造成的死锁
- Java编解码分析
- PAT 1072 开学寄语
热门文章
- 微信小程序开发:学习笔记[1]——Hello World
- swift中反向循环
- YxdJSON - Delphi 高性能 JSON 库(支持RTTI和序列化操作)
- 开始使用Python
- hihocoder #1052 : 基因工程(字符串处理 + 找规律 )
- 【Lintcode】033.N-Queens II
- JVM(一)虚拟机内存划分
- Python基础入门知识
- bzoj 2865 字符串识别 —— 后缀数组
- JSON 的正确用法:Python、MongoDB、JavaScript与AjaxJSON 的正确用法:Python、MongoDB、JavaScript与Ajax