问题描述

// 图片按钮
<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动态添加元素绑定点击事件，触发事件多次执行问题？相关推荐

js动态添加元素为何点击事件无效
本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说, 看看下面的代码: <!DOCTYPE html> <html><head&g ...
jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
Unity 碰撞事件触发事件
Unity 碰撞事件触发事件碰撞和被碰撞的物体都需要加有 Collider 碰撞组件两个物体至少有一个带有刚体触发器需要在Collider组件中勾选Trigger属性 1.触发器事件 //触发 ...
jquery 动态按钮绑定点击事件
一.Jquery实现点击事件的四种写法来自:https://blog.csdn.net/liutianjie/article/details/85112787 1. $(".tab&quo ...
关于js中无法绑定点击事件
在js文件中添加点击事件失败,但是HTML中onclick就能成功. 解决办法:将js的引用的script标签放到</body>的后面.这样在页面渲染之后再执行js代码.
微信小程序-如何点击marker触发事件更改图标icon
文章目录前言 1.触发事件更改marker图标icon 2.实现步骤 2.1.wxml页面 2.2.js页面代码总结前言最近在做课设,要求实现一个找附近停车位的功能绿色marker为空闲车位 ...
EventSystem的事件触发和pointer类执行顺序
上一篇写了Event Trigger的触发事件方法.这篇写EventSystem的触发事件方法.这两个方法都可以用来触发3D和2D事件.而且场景中都必须存在EventSystem这个GameObjec ...
js为链接绑定点击事件并且附带return false;来阻止跳转
<!DOCTYPE HTML> <html><head><meta charset="gb2312" /><title> ...
SpringBoot中使用thymeleaf时点击按钮触发事件失败
场景在SpringBoot项目中使用thymeleaf模板时按钮的点击事件没法触发. 需要用到jquery的delegate()函数. delegate()函数用于为指定元素的一个或多个事件绑定事件 ...

JS动态添加元素绑定点击事件，触发事件多次执行问题？

问题描述

分析：

解决方案：

JS动态添加元素绑定点击事件，触发事件多次执行问题？相关推荐

最新文章

热门文章