Les événements dans les événements de jQuery

Question

C'est peut-être une question très basique mais je n'ai pas trouvé de réponse. (Je cherche peut-être les mauvais termes...)

Parfois, je ressens le besoin d'ajouter un événement à l'intérieur d'un autre événement afin de partager des variables, par exemple. Mais je me suis rendu compte que les événements à l'intérieur peuvent être déclenchés plusieurs fois en fonction des fois où l'événement parent a été déclenché.

Voici un exemple de base de ce dont je parle : http://jsfiddle.net/mRc9K/

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked"); //fired multiple times
            $(this).parent().hide(); 
        });
    });
});

Si vous cliquez plus d'une fois dans le "premier clic", vous verrez comment le deuxième événement est déclenché plusieurs fois.

Je ne recherche pas ce comportement. Je sais Je peux l'éviter en utilisant la délégation l'utilisation de .on() mais... n'y a-t-il pas un autre moyen d'éviter que les événements internes soient déclenchés plusieurs fois ?

Merci.

Answer 1

Une solution serait d'utiliser la fonction de jQuery one() méthode.

one() - Attachez un gestionnaire à un événement pour les éléments. Le gestionnaire est exécuté au maximum une fois par élément.

Dans ce cas, ce serait :

$('#link').one('click', function(){
   alert("Clicked"); //fired multiple times
   $(this).parent().hide(); 
});

Exemple de jsFiddle ici.

Answer 2

Il suffit d'utiliser .one() qui lie l'événement une seule fois par élément :

$('.demo').click(function () {
    $('.hidden').show(function () {
        $('#link').one('click', function () {
            alert("Clicked");
            $(this).parent().hide();
        });
    });
});

Démo y Documentation

Answer 3

Vous pouvez également utiliser une variable comme indicateur : Démonstration en direct

var clicked = false;
$('.demo').click(function(){
    clicked = true;
    $('.hidden').show(function(){
        $('#link').click(function(){
            if(clicked == true){
                alert("Clicked");
                $(this).parent().hide();
                clicked = false;
            }
        });
    });
});

Answer 4

Vous pouvez soit le déclencher une seule fois comme tous les autres l'ont dit ou vous pouvez délier l'événement de clic à chaque fois (juste une approche différente).

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked");
            $(this).parent().hide();
            $('#link').unbind('click');
        });
    });
});

jsfiddle :).