Modo migliore per rimuovere un gestore di eventi in jQuery?

Question

Ho un input type="image".Questo agisce come le note di cella in Microsoft Excel.Se qualcuno entra in un numero nella casella di testo che questo input-image è accoppiato con, di installazione di un gestore eventi per l' input-image.Quindi, quando l'utente fa clic sul image, ottengono un po ' di popup per aggiungere alcune note per i dati.

Il mio problema è che quando un utente inserisce uno zero nella casella di testo, ho bisogno di disabilitare il input-image's gestore di eventi.Ho provato le seguenti, ma senza alcun risultato.

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

Answer 1

jQuery ≥ 1.7

Con jQuery 1.7 in poi l'evento API è stato aggiornato, .bind()/.unbind() sono ancora disponibile per la compatibilità, ma il metodo preferito è tramite il on()/off() funzioni.Il seguito 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 codice di esempio che è semplicemente l'aggiunta di un altro evento click per l'immagine, non sovrascrivere il precedente:

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

Entrambi gli eventi click, quindi, verrà licenziato.

Come le persone hanno detto che si può utilizzare di separazione per rimuovere tutti gli eventi click:

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

Se si desidera aggiungere un singolo evento e quindi rimuovere (senza rimozione di tutti gli altri che potrebbero essere state aggiunte), allora è possibile utilizzare l'evento sorta di spazio di nomi:

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

e per rimuovere solo il vostro evento:

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

Answer 2

Questo non era disponibile quando si è risposto a questa domanda, ma è anche possibile utilizzare live () metodo 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 si fa clic su #mydisablebutton, verrà aggiunta 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.

Answer 3

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

Answer 4

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 argument.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.

Answer 5

forse il metodo unbind funzionerà per te

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

Answer 6

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)

Answer 7

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.

});​

Answer 8

È possibile che tu stia aggiungendo il gestore onclick come markup in linea:

<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 lo menziona un po 'più obliquamente in un commento sopra.

Answer 9

Aggiornato per il 2014

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

Answer 10

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

Answer 11

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
}

Answer 12

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

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

Entrambi unbind() e .off() i metodi non funzionano .

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

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

Answer 13

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

Rimuovere tutti i gestori di eventi significa avere il semplice HTML structure senza tutti i event handlers collegati al element e al suo child nodes. Per fare ciò, jQuery's clone() ha 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 clone al posto di original senza <=> su di esso.

Buona fortuna ...

Answer 14

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

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

Answer 15

se si imposta onclick tramite html è necessario removeAttr ($(this).removeAttr('onclick'))

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

Answer 16

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 riuscivo a separare il " .button " classe Ho appena assegnato un'altra classe al pulsante con 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 sia d'aiuto.

Answer 17

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>

Answer 18

So che arriva tardi, ma perché non usare il semplice JS 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

Answer 19

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