Comment faire pour désactiver temporairement un gestionnaire de clic en jQuery?

C'est un plus idiomatiques alternative à l'artificiel, de l'état de la variable solutions:

$("#button_id").one('click', DoSomething);

function DoSomething() {
  //do something.

  $("#button_id").one('click', DoSomething);
}

Un ne sont exécutés qu'une seule fois (jusqu'à ce attachés à nouveau). Plus d'infos ici: http://docs.jquery.com/Events/one

Vous pouvez séparer votre gestionnaire avec .off, mais il y a une mise en garde; si vous ne le faites pas tout simplement empêcher le gestionnaire d'être déclenché à nouveau alors qu'il est déjà en cours d'exécution, vous devez reporter reconsolidation du gestionnaire.

Considérons par exemple ce code, qui utilise un 5-deuxième chaud de sommeil pour simuler quelque chose synchrone et coûteuse en termes de calcul étant effectué directement depuis le gestionnaire (comme lourd de manipulation du DOM, par exemple):

<button id="foo">Click Me!</div>
<script>
    function waitForFiveSeconds() {
        var startTime = new Date();
        while (new Date() - startTime < 5000) {}
    }
    $('#foo').click(function handler() {
        //BAD CODE, DON'T COPY AND PASTE ME!
        $('#foo').off('click');
        console.log('Hello, World!');
        waitForFiveSeconds();
        $('#foo').click(handler);
    });
</script>

Cela ne fonctionnera pas. Comme vous pouvez le voir si vous l'essayer dans cette JSFiddle, si vous cliquez sur le bouton pendant que le gestionnaire est déjà en cours d'exécution, le gestionnaire d'exécuter une deuxième fois, après la première exécution de finitions. Qui plus est, au moins dans Chrome et Firefox, ce serait vrai même si vous n'avez pas utiliser jQuery et utilisé addEventListener et removeEventListener d'ajouter et de supprimer le gestionnaire de la place. Le navigateur exécute le gestionnaire d'après le premier clic, la déliaison et la reconsolidation du gestionnaire, et puis gère le deuxième clic et vérifie si il y a un gestionnaire de clic sur exécuter.

Pour contourner ce problème, vous devez reporter une nouvelle liaison de la gestionnaire de l'aide setTimeout, de sorte que les clics qui se passe pendant que le premier gestionnaire est en cours d'exécution seront traitées avant vous rattachez le gestionnaire.

<button id="foo">Click Me!</div>
<script>
    function waitForFiveSeconds() {
        var startTime = new Date();
        while (new Date() - startTime < 5000) {}
    }
    $('#foo').click(function handler() {
        $('#foo').off('click');
        console.log('Hello, World!');
        waitForFiveSeconds();

        //Defer rebinding the handler, so that any clicks that happened while
        //it was unbound get processed first.
        setTimeout(function () {
            $('#foo').click(handler);
        }, 0);
    });
</script>

Vous pouvez le voir en action à cette modification JSFiddle.

Naturellement, cela est inutile si ce que vous faites dans votre gestionnaire est déjà asynchrone, car alors vous êtes déjà à la cession du contrôle du navigateur et de le laisser rincer tous les événements de clic avant de vous relier à votre gestionnaire. Par exemple, un code comme cela fonctionne très bien sans une setTimeout appel:

<button id="foo">Save Stuff</div>
<script>
    $('#foo').click(function handler() {
        $('#foo').off('click');
        $.post( "/some_api/save_stuff", function() {
            $('#foo').click(handler);
        });
    });
</script>

Si #button_id implique un standard bouton en HTML (comme un bouton), vous pouvez utiliser le 'disabled' attribut faire sur le bouton inactif pour le navigateur.

$("#button_id").click(function() {
    $('#button_id').attr('disabled', 'true');

    //do something

     $('#button_id').removeAttr('disabled');
});   

Ce que vous devez être prudent avec, cependant, est l'ordre dans lequel ces choses peuvent arriver. Si vous utilisez jquery cacher commande, vous voudrez peut-être inclure le "$('#button_id').removeAttr('disabled');" dans le cadre d'un appel de retour, de sorte qu'il ne se produit pas jusqu'à ce que la peau est complète.

[modifier] exemple de fonction à l'aide d'un rappel:

$("#button_id").click(function() {
    $('#button_id').attr('disabled', 'true');
    $('#myDiv').hide(function() { $('#button_id').removeAttr('disabled'); });
});   

il est préférable que l'utilisation actuelle de l'événement et de ne pas sauver gestionnaire mondial de gestionnaire.
je reçois élément courant de l'événement, puis séparer puis de lier à nouveau.
pour un gestionnaire.

var element =  $("#elemid")[0];
var tempHandler = jQuery._data(element)["events"]["click"][0].handler;
$("#elemid").unbind("click");

//do the job that click not suppose to listen;
$("#elemid").bind("click" , tempHandler );

pour tout gestionnaire

var element =  $("#elemid")[0];
var clickHandlerList = jQuery._data(element)["events"]["click"];
var handlerList = [];
for(var i  = 0 ; i <  clickHandlerList .length ; i++) {
    handlerList .push(clickHandlerList [i].handler);
}
$("#elemid").unbind("click");
//do the job that click not suppose to listen;
for(var i  = 0 ; i <  handlerList.length ; i++) {
    //return back all handler to element.
    $("#elemid").bind("click" , handlerList[i]);
}

Cet exemple.

---

Code HTML:

  <div class="wrapper">
     <div class="mask">Something</div> 
  </div>

jQuery:

    var fade = function(){
        $(".mask").fadeToggle(500,function(){
            $(this).parent().on("click",function(){
                $(this).off("click");
                fade();
            });
        });
    };

    $(".wrapper").on("click",function(){
        $(this).off("click");
        fade();     
    });

Ce code affiche le chargement sur l'étiquette du bouton, et le bouton de réglage de désactivation de l'état, puis, après traitement, de le ré-activer et retourner l'original du texte du bouton:

$(function () {

        $(".btn-Loading").each(function (idx, elm) {
            $(elm).click(function () {
                //do processing
                if ($(".input-validation-error").length > 0)
                    return;
                $(this).attr("label", $(this).text()).text("loading ....");
                $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                    //original event call
                    $.when($(elm).delay(1000).one("click")).done(function () {
                        $(this).animate({ disabled: false }, 1000, function () {
                            $(this).text($(this).attr("label"));
                        })
                    });
                    //processing finalized
                });
            });
        });
        //and fire it after definition
    }
   );