jQuery jquery防止分配的重复功能

jquery prevent duplicate function assigned

提问by Roger

If I need to assign a click function dynamically, is there a way to ensure the click function is only assigned once and not duplicated?

如果我需要动态分配点击功能，有没有办法确保点击功能只分配一次而不是重复？

this.click(function(){
    alert('test');
})

回答by Marius

You can unbind the click event before you bind it again, that way you will only have one event attached to it:

您可以在再次绑定之前取消绑定 click 事件，这样您将只附加一个事件：

//assuming this is a jquery object.
this.unbind("click");
this.click(function(){
  alert("clicked once");
});

As of jQuery 1.7, click now uses .on (http://api.jquery.com/click/) so the correct code is now

从 jQuery 1.7 开始，单击现在使用 .on ( http://api.jquery.com/click/) 所以现在正确的代码是

//assuming this is a jquery object.
this.off("click");
this.click(function(){
  alert("clicked once");
});

This will unbind all click events (including ones created by any plugins you might be using). To make sure you only unbind your event use namespaces. (http://api.jquery.com/off/)

这将取消绑定所有点击事件（包括由您可能正在使用的任何插件创建的事件）。为确保您只取消绑定事件，请使用命名空间。( http://api.jquery.com/off/)

//assuming this is a jquery object.
this.off("click.myApp");
this.on("click.myApp", function(){
  alert("clicked once");
});

Here myApp is the namespace.

这里 myApp 是命名空间。

回答by sieppl

With jQuery .on()you can do something like that:

使用 jQuery .on()你可以做这样的事情：

//removes all binding to click for the namespace "myNamespace"
$(document).off('click.myNamespace'); 

$(document).on('click.myNamespace', '.selector', function(event) {...}); 

//this will be also removed (same namespace)
$(document).on('click.myNamespace', '.anotherSelector', function(event) {...}); 

回答by Muhd

I would like to add to Marius's answer--

我想补充一下马吕斯的回答——

In avoiding duplicate bindings you don't want to accidentally unbind something if there is supposed to be more than one function bound to an event. This is especially important when you are working on something with multiple developers. To prevent this you can use event namespacing:

为了避免重复绑定，如果应该有多个函数绑定到一个事件，您不希望意外解除绑定。当您与多个开发人员一起工作时，这一点尤其重要。为了防止这种情况，您可以使用事件命名空间：

//assuming this is a jquery object.
var alertEvent = 'click.alert'
this.unbind(alertEvent).bind(alertEvent,function(){
  alert('clicked once');
});

Here 'alert' is the name of the namespace for your click event and only your functions that were bound with that namespace will be unbound.

这里的 'alert' 是您的点击事件的命名空间的名称，只有与该命名空间绑定的函数才会被解除绑定。

回答by Ricardo Figueiredo

assuming that elements are being added to the html and you want to add an event only for elements added:

假设元素被添加到 html 并且您只想为添加的元素添加事件：

function addEvents2Elements()//prevent Duplicate
{
    //this will add the event to all elements of class="ele2addevent"
    $('.ele2addevent').not('.clickbind').on('click',function(){alert('once');})

    //this will add a class an then the class="ele2addevent clickbind"
    $('.ele2addevent').not('.clickbind').addClass('.clickbind');
    //all elements of class="... clickbind" will not be catched anymore in the first line because of .not() every time you call this function
}
addEvents2Elements();

be shure that you add only with the class="ele2addevent", because after the bind it will be class="ele2addevent clickbind" and not catched again...

请确保您只添加了 class="ele2addevent"，因为在绑定之后它将是 class="ele2addevent clickbind" 并且不会再次被捕获...