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

问题描述

// 图片按钮
<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);