Il modo migliore per rimuovere un gestore eventi in jQuery?

Ho un input type="image". Questo si comporta come le note di cella in Microsoft Excel. Se qualcuno inserisce un numero nella casella di testo a cui input-imageè associato, imposto un gestore eventi per il input-image. Quindi, quando l'utente fa clic su image, viene visualizzato un piccolo popup per aggiungere alcune note ai dati.

Il mio problema è che quando un utente inserisce uno zero nella casella di testo, devo disabilitare il input-imagegestore di eventi. Ho provato quanto segue, ma invano.

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

jQuery ≥ 1.7

Con jQuery 1.7 in poi l'API dell'evento è stata aggiornata, .bind()/ .unbind()sono ancora disponibili per la compatibilità con le versioni precedenti, ma il metodo preferito sta usando le funzioni on () / off () . Il sotto sarebbe ora,

$('#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

Nel tuo codice di esempio stai semplicemente aggiungendo un altro evento click all'immagine, non sovrascrivendo il precedente:

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

Verranno quindi attivati ​​entrambi gli eventi clic.

Come è stato detto dalle persone, puoi utilizzare unbind per rimuovere tutti gli eventi clic:

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

Se si desidera aggiungere un singolo evento e quindi rimuoverlo (senza rimuoverne altri eventualmente aggiunti), è possibile utilizzare lo spazio dei nomi degli eventi:

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

e per rimuovere solo il tuo evento:

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

Questo non era disponibile quando è stata data una risposta a questa domanda, ma puoi anche usare il metodo live () per abilitare / disabilitare gli eventi.

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

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

Ciò che accadrà con questo codice è che quando fai clic su #mydisablebutton, aggiungerà la classe disabilitata all'elemento #myimage. Questo farà sì che il selettore non corrisponda più all'elemento e l'evento non verrà generato fino a quando la classe 'disabled' viene rimossa rendendo nuovamente valido il selettore .live ().

Questo ha altri vantaggi aggiungendo uno stile basato anche su quella classe.

Se vuoi rispondere a un evento solo una volta , la sintassi seguente dovrebbe essere davvero utile:

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

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

Usando argomenti.callee , possiamo garantire che il gestore di una specifica funzione anonima venga rimosso e, quindi, abbia un solo gestore di tempo per un determinato evento. Spero che questo aiuti gli altri.

Questo può essere fatto usando la funzione unbind.

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

Puoi aggiungere più gestori di eventi allo stesso oggetto ed evento in jquery. Ciò significa che aggiungerne uno nuovo non sostituisce quelli vecchi.

Esistono diverse strategie per modificare i gestori di eventi, come gli spazi dei nomi degli eventi. Ci sono alcune pagine su questo nei documenti online.

Guarda questa domanda (è così che ho imparato a non separarmi). C'è una descrizione utile di queste strategie nelle risposte.

Come leggere le funzioni di callback con hover associato in jquery

forse il metodo unbind funzionerà per te

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

Ho dovuto impostare l'evento su null usando il prop e l'attr. Non potevo farlo con l'uno o l'altro. Inoltre, non riuscivo a far funzionare .unbind. Sto lavorando su un elemento TD.

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

Se l'evento è collegato in questo modo e la destinazione deve essere scollegata:

$('#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.

});​

È possibile che tu stia aggiungendo il onclickgestore come markup inline:

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

In tal caso, il jquery .off()o .unbind()non funzionerà. Devi aggiungere anche il gestore eventi originale in jquery:

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

Quindi jquery ha un riferimento al gestore eventi e può rimuoverlo:

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

VoidKing menziona questo un po 'più obliquamente in un commento sopra.

Aggiornato per il 2014

Usando l'ultima versione di jQuery, ora puoi separare tutti gli eventi su uno spazio dei nomi semplicemente $( "#foo" ).off( ".myNamespace" );

Il modo migliore per rimuovere l'evento onclick inline è $(element).prop('onclick', null);

A remove TUTTI event-handlers , questo è ciò che ha funzionato per me:

Rimuovere tutti i gestori di eventi significa avere la pianura HTML structuresenza tutto il relativo event handlersal elemente al suo child nodes. Per fare questo, jQuery's clone()aiutato.

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

Con questo, avremo il cloneposto del originalsenza event-handlers.

In bocca al lupo...

Grazie per l'informazione. molto utile l'ho usato per bloccare l'interazione della pagina mentre ero in modalità modifica da un altro utente. L'ho usato insieme a ajaxComplete. Non necessariamente lo stesso comportamento ma in qualche modo simile.

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

function executePageLock(){
    //do something
}

Nel caso in cui il .on()metodo fosse precedentemente utilizzato con un particolare selettore, come nell'esempio seguente:

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

Sia unbind()e .off()metodi non sono andare a lavorare.

Tuttavia, il metodo .undelegate () potrebbe essere utilizzato per rimuovere completamente il gestore dall'evento per tutti gli elementi che corrispondono al selettore corrente:

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

Se si utilizza $(document).on()per aggiungere un listener a un elemento creato dinamicamente, potrebbe essere necessario utilizzare quanto segue per rimuoverlo:

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

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

Funziona anche bene. Semplice e facile. Vedi http://jsfiddle.net/uZc8w/570/

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

se si imposta la onclickviahtml è necessarioremoveAttr ($(this).removeAttr('onclick'))

se lo imposti tramite jquery (come dopo il primo clic nei miei esempi sopra) allora devi farlo unbind($(this).unbind('click'))

So che arriva tardi, ma perché non usare JS semplice per rimuovere l'evento?

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

oppure, se si utilizza una funzione denominata come gestore eventi:

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

Tutti gli approcci descritti non hanno funzionato per me perché stavo aggiungendo l'evento click con on()al documento in cui l'elemento è stato creato in fase di esecuzione:

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

La mia soluzione alternativa:

Dato che non potevo separare la classe ".button", ho appena assegnato un'altra classe al pulsante che aveva gli stessi stili CSS. In questo modo il gestore live / on-event ha finalmente ignorato il clic:

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

Spero che aiuti.

Spero che il mio codice qui sotto spieghi tutto. 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>

Basta semplicemente rimuoverlo dal pulsante:

$('.classname').click(function(){
$( ".classname" ).remove();
});