jquery empêcher la duplication de la fonction affectée

Question

Si j'ai besoin d'assigner dynamiquement une fonction de clic, y a-t-il un moyen de m'assurer que la fonction de clic n'est assignée qu'une seule fois et non dupliquée?

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

Answer 1

Vous pouvez délie l'événement de clic avant de le lier à nouveau, de cette façon vous n'avez un événement qui lui:

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

À partir de jQuery 1.7, cliquez utilise maintenant .on (http://api.jquery.com/click/) de sorte que le bon code est maintenant

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

Cela délie tous les événements de clic (y compris ceux créés par les plug-ins que vous utilisez peut-être). Pour vous assurer que vous ne déliez que votre événement, utilisez des espaces de noms. (http://api.jquery.com/off/)

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

Ici myApp est l'espace de noms.

Answer 2

Je voudrais ajouter à réponse--

Marius En évitant les liaisons en double vous ne voulez pas accidentellement délie quelque chose s'il est censé être plus d'une fonction liée à un événement. Ceci est particulièrement important lorsque vous travaillez sur quelque chose avec plusieurs développeurs. Pour éviter cela, vous pouvez utiliser événement espaces de noms:

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

Voici alerte »est le nom de l'espace de noms pour votre événement de clic et uniquement les fonctions qui ont été liés avec cet espace sera non lié.

Answer 3

Avec jQuery .on() vous pouvez faire quelque chose comme ça:

//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) {...}); 

Answer 4

en supposant que les éléments sont ajoutés au code HTML et que vous voulez ajouter un événement uniquement pour les éléments ajoutés:

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(); 

être shure que vous ajoutez seulement avec le class = "ele2addevent", car après le bind il sera class = "ele2addevent clickbind" et ne sera pas attrapé à nouveau ...