Dans jQuery, est-il possible de lier un clic une seule fois?

Question

J'ai une application ajax qui va exécuter des fonctions à chaque interaction. J'aimerais pouvoir exécuter ma fonction de configuration à chaque fois afin que tout mon code d'installation pour cette fonction reste encapsulé. Cependant, relier des éléments plus d'une fois signifie que le gestionnaire s'exécutera plus d'une fois, ce qui est évidemment indésirable. Existe-t-il un moyen élégant dans jQuery d'appeler bind sur un élément plus d'une fois sans que le gestionnaire ne soit appelé plus d'une fois?

Answer 1

Vous pouvez joindre l'événement à document avec la fonction one():

$(document).one('click', function(e) { 
    // initialization here 
}); 

Une fois exécuté, ce gestionnaire d'événement est supprimé à nouveau de sorte qu'il ne fonctionne pas à nouveau. Toutefois, si vous avez besoin de l'initialisation pour exécuter avant l'événement click d'un autre élément, nous devrons penser à autre chose. L'utilisation de mousedown au lieu de click peut alors fonctionner, car l'événement mousedown est déclenché avant l'événement click.

Answer 2

L'utilisateur jQuery one fonctionne comme Tom, mais délie le gestionnaire à chaque fois avant de se lier à nouveau. Il est utile d'affecter le gestionnaire d'événements à une variable plutôt que d'utiliser une fonction anonyme.

var handler = function(e) { // stuff }; 

$('#element').unbind('click', handler).one('click', handler); 

//elsewhere 
$('#element').unbind('click', handler).one('click', handler); 

Vous pouvez également faire .unbind('click') pour supprimer tous les gestionnaires de clic attachés à un élément.

Answer 3

La réponse de Chetan Sastry est ce que vous voulez. Fondamentalement, il suffit d'appeler un $ (élément) .unbind (événement); avant chaque événement.

Donc, si vous avez une fonction comme loadAllButtonClicks() qui contient tous les

$(element).on("click", function(){}); 

méthodes pour chaque bouton sur votre page, et que vous exécutez que chaque fois qu'un bouton est cliqué, cela produira évidemment plus un événement pour chaque bouton. Pour résoudre ce problème il suffit d'ajouter

$(element).unbind(event); 

avant chaque

$(element).on("click", function(){}); 

et il délie tous les événements à cet élément, puis ajoutez l'un événement de clic.

Answer 4

Vous pouvez également utiliser .off() si unbind ne fait pas l'affaire. Assurez-vous que le sélecteur et événement donné à .off correspondent exactement à ceux initialement prévus à .oN():

$("div.selector").off("click", "a.another_selector");  
$("div.selector").on("click", "a.another_selector", function(e){ 

C'est ce qui a fonctionné pour moi à résoudre le même problème rechargeant ajax.