Meilleure façon de supprimer un gestionnaire d'événement en jQuery?

ce n'était pas disponible lorsque cette question a été répondue, mais vous pouvez également utiliser la méthode live () pour activer/désactiver les événements.

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

ce qui se passera avec ce code est que lorsque vous cliquerez sur #mydisabblebutton, il ajoutera la classe désactivée à l'élément #myimage. Cela permettra au sélecteur de ne plus correspondre à l'élément et l'événement ne sera pas déclenché tant que la classe 'disabled' n'aura pas été retirée, ce qui rendra le .sélecteur live () valide à nouveau.

ceci a d'autres avantages en ajoutant le style basé sur cette classe aussi bien.

cela peut être fait en utilisant la fonction unbind.

$('#myimage').unbind('click');

vous pouvez ajouter plusieurs gestionnaires d'événements au même objet et événement dans jquery. Cela signifie l'ajout d'un nouveau ne pas remplacer les anciennes.

il existe plusieurs stratégies pour changer les gestionnaires d'événements, comme les espaces de noms d'événements. Il y a quelques pages à ce sujet dans les documents en ligne.

Regardez cette question (c'est comme ça que j'ai appris l'unbind). Il y a quelques description utile de ces stratégies dans les réponses.

Comment lire lié placez les fonctions de rappel en jquery

si vous voulez répondre à un événement une seule fois , la syntaxe suivante devrait être vraiment utile:

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

utilisant les arguments .appelé , nous pouvons nous assurer que le gestionnaire de fonction anonyme est supprimé, et donc avoir un seul gestionnaire de temps pour un événement donné. Espérons que cela aide les autres.

peut-être que la méthode unbind fonctionnera pour vous

$("#myimage").unbind("click");

j'ai dû régler l'événement à null en utilisant l'hélice et l'attr. Je ne pouvais pas le faire avec l'un ou l'autre. Je n'arrivais pas à obtenir .unbind de travail. Je travaille sur un élément TD.

.prop("onclick", null).attr("onclick", null)

vous pouvez ajouter le onclick handler comme inline markup:

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

si c'est le cas, le jquery .off() ou .unbind() ne fonctionnera pas. Vous devez ajouter le gestionnaire d'événement original dans jquery aussi bien:

$("#addreport").on("click", "", function (e) {
   openAdd();
});

alors le jquery a une référence au gestionnaire d'événements et peut la supprimer:

$("#addreport").off("click")

VoidKing mentionne cela un peu plus obliquement dans un commentaire ci-dessus.

si l'événement est attaché de cette façon , et la cible doit être détachée:

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​

mis à jour pour 2014

en utilisant la dernière version de jQuery, vous êtes maintenant en mesure de débiner tous les événements sur un espace de noms en faisant simplement $( "#foo" ).off( ".myNamespace" );

Merci pour l'information. très utile je l'ai utilisé pour verrouiller l'interaction de page pendant que dans le mode d'édition par un autre utilisateur. Je l'ai utilisé en conjonction avec ajaxComplete. Pas nécessairement le même comportement, mais quelque peu similaire.

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}

la meilleure façon de supprimer l'événement onclick en ligne est $(element).prop('onclick', null);

dans le cas .on() méthode a été précédemment utilisé avec un sélecteur particulier, comme dans l'exemple suivant:

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

les deux unbind() et .off() méthodes ne sont pas aller à travailler.

Toutefois, .la méthode undelegate() pourrait être utilisée pour supprimer complètement handler de l'événement pour tous les éléments qui correspondent au sélecteur courant:

$("body").undelegate(".dynamicTarget", "click")

ça marche aussi très bien .Simple et facile.voir http://jsfiddle.net/uZc8w/570 /

$('#myimage').removeAttr("click");

si vous définissez la onclick via html vous devez removeAttr ($(this).removeAttr('onclick'))

si vous le définissez via jquery (comme après le premier clic dans mes exemples ci-dessus) alors vous devez unbind($(this).unbind('click'))

à remove tout event-handlers , c'est ce qui a fonctionné pour moi:

pour supprimer tous les gestionnaires d'événements signifie d'avoir la plaine HTML structure sans tout le event handlers attaché au element et son child nodes . Pour ce faire, jQuery's clone() a aidé.

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

avec ceci, nous aurons le clone à la place du original sans event-handlers dessus.

bon Chance...

J'espère que mon code ci-dessous explique tout. HTML:

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>

je sais que cela arrive tard, mais pourquoi ne pas utiliser des js simples pour supprimer l'événement?

var myElement = document.getElementByID("your_ID");
myElement.onclick = null;

ou, si vous utilisez une fonction nommée comme gestionnaire d'événements:

function eh(event){...}
var myElement = document.getElementByID("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

toutes les approches décrites ne fonctionnaient pas pour moi parce que j'ajoutais l'événement de clic avec on() au document où l'élément a été créé à l'exécution:

$(document).on("click", ".button", function() {
    doSomething();
});

ma solution:

comme je ne pouvais pas détacher le ".bouton" classe j'ai juste reçu une autre classe pour le bouton qui a le même styles CSS. En agissant de la sorte, le gestionnaire d'événements/en direct a finalement ignoré le clic:

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

Espère que ça aide.