问题描述
// 图片按钮<img src="xxx" style="margin-left: 34px;margin-top: 7px;" class="addBtn2">
第一次点击按钮时，正常触发$(document).on(“click”, “.addBtn2”, function () {})事件，动态添加相关内容。
$(document).on("click", ".addBtn2", function () {// 执行代码console.log(this)var no = $("#formzhicheng .item_zhiwu").length;if($("#formzhicheng .item_zhiwu").length == 5){layer.msg("时间段数已满");}else{var noFuture = no*1+1;var html = main2.renderHtmlOntInit(noFuture); // 返回元素$("#formzhicheng").append(html);$("#interest").val(noFuture);}form.render();starttimeRenderBotany(); // 启动时间插件});// 返回要渲染的dom元素// lamplight 进入页面时请求的数组renderHtmlOntInit:function(id){var str = "";str +=`dom元素`;str += main2.Setting();str +=`dom元素`;str += main2.lamplightHtmlBtn(id,lamplight);//循环渲染dom元素str +=`dom元素`;str += main2.lamplightHtmlInput(id,lamplight);//循环渲染dom元素str +=`dom元素`;return str;},// 启动时间插件function starttimeRenderBotany() {lay('.onlineTime').each(function () {laydate.render({elem: this,type: 'time',trigger: 'click'});});$(".onlineTime").removeAttr("lay-key");};
当tab切换页面返回后点击页面的按钮，会多次触发$(document).on(“click”, “.addBtn2”, function () {})事件，触发了两次，当第三次时，会发现触发了三次，以此类推。。。。
分析：
明明每次tab切换时都全部刷新了页面，为什么像是被删除的元素依然存在。原因暂时没有弄明白，查询了很多大佬的解决方法和解释，但看着原因都不太像。
一种是：问题的本质，事件委托造成的。
一种是：绑定一直都在，而这个绑定被保存在一个叫做事件队列的地方，他不在循环执行的主线程中，画了一张需要默契才能看懂的图。
像是知道，又说不明白。
有些懵！！！
解决方案：
第一种：直接给添加的元素上绑定事件。
动态添加的元素，再动态为此绑定事件，待元素被删除后，与其绑定的相应事件其实是会从事件绑定队列中删除。
// 图片按钮<img src="xxx" class="addBtn2" onclick="toogle(this)">function toogle(_this){// 执行代码 同上};
第二种：使用off方法，在绑定事件前解绑元素
$(document).off('click','.addBtn2').on("click", ".addBtn2", function () {// 执行代码 同上});
第三种：定时器中的事件绑定（没有尝试）
设定一个全局变量来保存这个定时器，在每次设定定时器时，先清除已经设定过的定时器。
clearInterval(timer); //粗暴的写法timer&&clearInterval(timer); //严谨的写法timer=setInterval(function () {console.log('定时器');},2000);
如果觉得《JS动态添加元素绑定点击事件 触发事件多次执行问题？》对你有帮助，请点赞、收藏，并留下你的观点哦！
