jQuery添加的事件被多次执行的解决方案及分析

jQuery添加的事件被多次执行

在学习jQuery的过程中，发现自己的一个小例子出现了一些问题。单个button的click时间被多次重复执行。
解决方案在文章下方

案例分析

具体需求是， 根据一个数组中的数据给页面上添加节点，节点需要添加监听。

我的处理方式

//此方法为添加操作的监听方法 ， 可以给页面上的table中添加一条数据
let $addTableItem = function (data){
    let table = $("#table");
    table.append($getTr(data)); //给页面的table中添加 tr节点
    $(".delete-btn").on("click",$delBtnClick);//给节点添加监听
}

bug呈现
单次click触发了多次（多次，次数不定）监听方法

形成原因分析

在jQuery中，为同一节点添加相同事件，监听不是覆盖，而是添加。
节点（例子中$(".delete-btn") 被多次添加监听 ，因为要监听的节点是我们根据数据添加到页面上的，若不为其添加特点的id，我们只能在添加节点后为其添加监听，由于此处我是通过 ==(".delete-btn") == 选择的元素，除了最后添加的那个节点，其他节点都会在 以后添加节点添加监听执行

$(".delete-btn").on("click",$delBtnClick);

给当前所有.delete-btn 节点再次添加事件 ，相当于一个按钮被添加了多个相同的事件。

解决方式

既然知道了问题所在，那么解决方案就容易了，

1. 在给其添加事件监听时，为其清除掉以前的相同事件的监听（推荐）

   1. 使用jquery的off()方法
      $(".delete-btn").off("click").on("click", $delBtnClick);
   2. 使用unbind() jQuery 3.0中已弃用此方法，请用 off()代替。
      $(".delete-btn").unbind( "click" ).on("click", $delBtnClick);

2. 根据具体案例分析，若只是简单的读取数据然后创建，不必在中途在给页面中添加节点的话，可以先将节点全部添加到文档流中后，再去一次性给全部节点添加监听。（特殊情况可使用）

3. 为节点根据填入的数据添加上唯一性标识（id，或者自定义属性），这样就不会影响到其他节点的时间。（太麻烦，不建议，大可直接用方式一off()）

4. 若不想添加唯一性标识，可以通过添加一个特定类，使用jquery选择器中的last（通过append()添加节点）和get(0)（通过prepend()添加节点）获取你添加的最后一个节点（有兴趣的可以尝试使用。）

小结

傻瓜式解决

		```
		$(".delete-btn").off("click").on("click", $delBtnClick);
		```
		//将$(".delete-btn")换成你想要选择的节点，.off("click").on("click", function(e){ $doClick();});中的click换成你要添加的事件.

几种解决方式的不同点

最简单易使用的方法毫无疑问，就是off无疑。但其相对于其他几种解决方法，除了添加标识外，效率上都会有较大损失，当然，这其实是可以忽略的效率问题。但若是想要自己的代码效率上更加完美，没么第二种和第四种解决方案效率都要高于off，但第二种方案又存在着条件限制。
简单实用易操作的方法off ，会损失效率
选择器选定单个元素，相对效率高，但要根据实际情况分析使用

-------------------------------------------------------------------------------------------------------

若是感觉文章对你有点帮助，欢迎评论收藏 ，萌新小菜鸡，你的评论和收藏就是对我莫大的鼓励。