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()方法其实是相同的,不同之处在于,处理程序在委派的元素上触发事件后会被立即解除绑定,从而达到只绑定一次的效果。