Le meilleur moyen de supprimer un gestionnaire d'événements dans jQuery?

Question

J'ai un input type="image". Cela agit comme les notes de cellule dans Microsoft Excel. Si une personne entre un numéro dans la zone de texte avec laquelle ce input-image est associé, je configure un gestionnaire d'événements pour le image. Ensuite, lorsque l'utilisateur clique sur <=>, il reçoit une petite fenêtre pour ajouter des notes aux données.

Mon problème est que lorsqu'un utilisateur entre un zéro dans la zone de texte, je dois désactiver le gestionnaire d'événements de <=>. J'ai essayé ce qui suit, mais en vain.

$('#myimage').click(function { return false; });

Answer 1

jQuery & # 8805; 1,7

À partir de jQuery 1.7, l'API d'événement a été mise à jour. .bind() / .unbind() sont toujours disponibles pour la compatibilité ascendante, mais la méthode recommandée consiste à utiliser on () / off () . Le ci-dessous serait maintenant,

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery < 1,7

Dans votre exemple de code, vous ajoutez simplement un autre événement de clic à l'image, sans remplacer le précédent:

$('#myimage').click(function() { return false; }); // Adds another click event

Les deux événements de clic seront ensuite déclenchés.

Comme les gens l'ont déjà dit, vous pouvez utiliser unbind pour supprimer tous les événements de clic:

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

Si vous souhaitez ajouter un seul événement, puis le supprimer (sans en supprimer les autres éventuellement ajoutés), vous pouvez utiliser l'événement namespacing:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

et pour supprimer uniquement votre événement:

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

Answer 2

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

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

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

Avec ce code, si vous cliquez sur #mydisablebutton, la classe désactivée sera ajoutée à l'élément #myimage. Cela fera en sorte que le sélecteur ne corresponde plus à l'élément et que l'événement ne soit déclenché que lorsque la classe "désactivée" sera supprimée, ce qui rendra le sélecteur .live () valide à nouveau.

Cela présente d'autres avantages en ajoutant un style basé sur cette classe également.

Answer 3

Ceci peut être fait en utilisant la fonction unbind.

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

Vous pouvez ajouter plusieurs gestionnaires d'événements au même objet et au même événement dans jQuery. Cela signifie que l'ajout d'un nouveau ne remplace pas les anciens.

Il existe plusieurs stratégies pour modifier les gestionnaires d'événements, telles que les espaces de nom d'événement. Il y a quelques pages à ce sujet dans les documents en ligne.

Regardez cette question (c'est comme ça que j'ai appris le détachement). Il existe une description utile de ces stratégies dans les réponses.

Comment lire les fonctions de rappel survolées dans jquery

Answer 4

Si vous souhaitez répondre à un événement une seule fois , la syntaxe suivante est très utile:

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

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

En utilisant arguments.callee , nous pouvons nous assurer que le gestionnaire de fonctions anonymes spécifique est supprimé et disposer ainsi d'un gestionnaire de temps unique pour un événement donné. J'espère que cela aide les autres.

Answer 5

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

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

Answer 6

Je devais définir l'événement sur null en utilisant les propriétés prop et attr. Je ne pouvais pas le faire avec l'un ou l'autre. Je ne pouvais pas non plus me mettre au travail. Je travaille sur un élément TD.

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

Answer 7

Si l'événement est associé de cette façon , et que la cible ne doit pas être attaché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.

});​

Answer 8

Vous pouvez ajouter le gestionnaire onclick en tant que balisage en ligne:

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

Si tel est le cas, jquery .off() ou .unbind() ne fonctionnera pas. Vous devez également ajouter le gestionnaire d’événements original dans jQuery:

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

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

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

VoidKing le mentionne un peu plus haut dans un commentaire ci-dessus.

Answer 9

Mis à jour pour 2014

En utilisant la dernière version de jQuery, vous pouvez maintenant dissocier tous les événements d'un espace-noms en faisant simplement $( "#foo" ).off( ".myNamespace" );

Answer 10

La meilleure façon de supprimer un événement online lié est $(element).prop('onclick', null);

.

Answer 11

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

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

function executePageLock(){
    //do something
}

Answer 12

Dans le cas où .on() la méthode était précédemment utilisée avec un sélecteur particulier, comme dans l'exemple suivant:

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

Les unbind() et .off() méthodes ne vont pas au travail.

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

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

Answer 13

Pour remove TOUS event-handlers, voici ce qui a fonctionné pour moi:

Supprimer tous les gestionnaires d’événements signifie avoir la plaine HTML structure sans tous les event handlers attachés au element et à son child nodes. Pour ce faire, jQuery's clone() vous avez 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 <<> dessus.

Bonne chance ...

Answer 14

Cela fonctionne aussi très bien. Simple et facile.voir http://jsfiddle.net/uZc8w/570/

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

Answer 15

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'))

Answer 16

Toutes les approches décrites n'ont pas fonctionné pour moi car j'ajoutais l'événement click avec on() au document où l'élément avait été créé à l'exécution:

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

Ma solution de contournement:

Comme je ne pouvais pas dissocier le " .button " J'ai simplement assigné une autre classe au bouton qui avait les mêmes styles CSS. Ce faisant, le gestionnaire de live / on-event a finalement ignoré le clic:

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

L’espoir que cela aide.

Answer 17

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>

Answer 18

Je sais que cela arrive en retard, mais pourquoi ne pas utiliser JS pour supprimer l'événement?

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

ou, si vous utilisez une fonction nommée en tant que 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

Answer 19

Si vous utilisez $(document).on() pour ajouter un écouteur à un élément créé dynamiquement, vous devrez peut-être utiliser ce qui suit pour le supprimer:

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");