问题描述
// 图片按钮<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动态添加元素绑定点击事件 触发事件多次执行问题?》对你有帮助,请点赞、收藏,并留下你的观点哦!