jQuery 重复绑定click事件的解决方法

发表于 | 分类于

今天在写一个弹出窗口的插件时，在插件里面增加了一个回调函数。在插件功能执行完之后，给开发人员进行后续处理。例如，在回调函数里面进行界面的交互操作，其中一个操作就是点击事件。

下面是回调函数的主要代码：

1
2
3
4
5
6
7
8
9
var openwd = $("#openwd");
$("#open").on("click",function(){
	openwd.owshow({"callback":function(){
		$("#wdok").on("click",function(){
			console.log("确定");
			openwd.owhide();
		});
	}});
});

上面的代码执行不会报出Bug，能够正常运行。但是如果在多次点击“#wdok”按钮的时候，“#wdok”的click次数会进行累加。原因是在 callback 里面点击了“#wdok”按钮后，窗口只是被隐藏，而隐藏的元素并不会删除掉之前绑定的click事件。当再次弹出窗口后，同样点击“#wdok”按钮时，会执行同样的代码绑定同样的click事件。这样就造成了点击多次之后重复绑定同一事件的问题。

那么下面来讲讲解决此问题的方法：

方法1：在隐藏窗口后移除掉“#wdok”元素，是删除重个元素，这样会同时把绑定的click事件移除。在下次弹出窗口的时候再动态创建此按钮。但是这个方法要删除元素添加元素相对比较麻烦。

方法2：在$(“#wdok”).on(“click”)之前移除绑定的事件，利用jquery的unbind方法。例如：$(“#wdok”).unbind(“click”).on(“click”,function(){})，这样同样可以删除重复绑定的click事件。些方法相对第一种方法来话还是比较简便的。

方法3：第三种方法是利用jquery的one方法来进行click事件绑定。例如：$(“#wdok”).one(“click”,function(){})。这个方法比起前面两种方法更简单实用。

one()函数的官方说明：

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

one与on()方法其实是相同的，不同之处在于，处理程序在委派的元素上触发事件后会被立即解除绑定，从而达到只绑定一次的效果。