解析JS绑定事件重复触发问题 第一步
原创解析JS绑定事件重复触发问题 第一步
原创
一、什么问题
当前端开发过程中，经常用到事件，随着业务代码这一块的复杂化，在事件和多次注册和调用时，如果处理不好就会出现同一事件触发多次的问题。今天我们就聊一聊这个问题
二、事例
下面这段代码是一个简单的例子，页面上一有一个安钮。当点击’安钮‘时创建一个button为 test button代码插入area中。接着点击该button，console.log一个东西。如果下代码：
html结构：
<body>
<div id="tableBox" class="add">安钮</div>
<div class="area"></div>
</body>
css:
#tableBox{
width:100px;
height:30px;
background:red;
border:1px solid red;
text-align:center;
line-height:30px;
border-radius:5px;
}
.area{
width:100px;
height:100px;
margin-top:40px;
border:2px;
border:1px solid #000;
}
js代码：
$(function(){
$(".add").on('click',function(eve){
$(".area").append("<button class='test-btn'>test button</button>");
$(".area").on('click','.test-btn',function(event){
console.log("test button .....");
});
});
});
运行此段代码结果是：当第一次点击’安钮‘时，成功创建了一个button，再点击这个button执行打印出test button...，此时看一切都是那么正常，可是接着再点击第二次’安钮‘时，此时创建出来第二个button时，再点击刚才第一次创建出来的button，打印出来了3次，也就是说点击一次。执行了二次代码。以此类推。第三次时，就执行了三次代码。。。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。