it-swarm.com.de

Beste Weg, um einen Event-Handler in jQuery zu entfernen?

Ich habe einen input type="image". Dies verhält sich wie die Zellennotizen in Microsoft Excel. Wenn jemand eine Zahl in das Textfeld eingibt, mit der dieser input-image gekoppelt ist, richte ich eine Ereignisbehandlungsroutine für den input-image ein. Wenn der Benutzer dann auf image klickt, wird ein kleines Popup angezeigt, in dem er den Daten einige Notizen hinzufügt.

Mein Problem ist, dass ich, wenn ein Benutzer eine Null in das Textfeld eingibt, die Ereignisbehandlungsroutine von input-image deaktivieren muss. Ich habe Folgendes versucht, aber ohne Erfolg.

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

jQuery ≥ 1.7

Ab jQuery 1.7 wurde die Ereignis-API aktualisiert. .bind()/.unbind() sind aus Gründen der Abwärtskompatibilität weiterhin verfügbar. Die bevorzugte Methode ist jedoch on () / aus () Funktionen. Das Folgende wäre jetzt,

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

In Ihrem Beispielcode fügen Sie dem Bild einfach ein weiteres Klickereignis hinzu, ohne das vorherige zu überschreiben:

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

Beide Klickereignisse werden dann ausgelöst.

Wie bereits erwähnt, können Sie alle Klickereignisse mithilfe von "Unbind" entfernen:

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

Wenn Sie ein einzelnes Ereignis hinzufügen und dann entfernen möchten (ohne andere, die möglicherweise hinzugefügt wurden, zu entfernen), können Sie den Ereignisnamensraum verwenden:

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

und um nur Ihre Veranstaltung zu entfernen:

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

Dies war nicht verfügbar, als diese Frage beantwortet wurde, aber Sie können auch die live () -Methode verwenden, um Ereignisse zu aktivieren/deaktivieren.

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

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

Mit diesem Code passiert Folgendes: Wenn Sie auf #mydisablebutton klicken, wird die deaktivierte Klasse zum #myimage-Element hinzugefügt. Dies bewirkt, dass der Selektor nicht mehr mit dem Element übereinstimmt und das Ereignis erst ausgelöst wird, wenn die Klasse 'disabled' entfernt wird und der Selektor .live () wieder gültig wird.

Dies hat weitere Vorteile, da das Styling auch auf der Grundlage dieser Klasse hinzugefügt wird.

62
MacAnthony

Dies kann mithilfe der Funktion zum Aufheben der Bindung erfolgen.

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

Sie können demselben Objekt und Ereignis in jquery mehrere Ereignishandler hinzufügen. Dies bedeutet, dass das Hinzufügen eines neuen die alten nicht ersetzt.

Es gibt verschiedene Strategien zum Ändern von Ereignishandlern, z. B. Ereignisnamespaces. Es gibt einige Seiten darüber in den Online-Dokumenten.

Schauen Sie sich diese Frage an (so habe ich von Unbind erfahren). In den Antworten finden Sie eine nützliche Beschreibung dieser Strategien.

Wie man gebundene Hover-Callback-Funktionen in jquery liest

37
Mnebuerquo

Wenn Sie auf ein Ereignis reagieren möchten nur einmal, sollte die folgende Syntax wirklich hilfreich sein:

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

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

Mit arguments.callee können wir sicherstellen, dass der eine bestimmte Handler für anonyme Funktionen entfernt wird, und haben somit einen einzigen Handler für ein bestimmtes Ereignis. Hoffe das hilft anderen.

34
ghayes

vielleicht funktioniert die Unbind-Methode für Sie

$("#myimage").unbind("click");
31
John Boker

Ich musste das Ereignis mit der Requisite und dem Attribut auf null setzen. Ich konnte es nicht mit dem einen oder anderen machen. Ich konnte auch nicht .unbind zum Arbeiten bringen. Ich arbeite an einem TD -Element.

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

Möglicherweise fügen Sie den onclick -Handler als Inline-Markup hinzu:

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

In diesem Fall funktioniert die Abfrage .off() oder .unbind() nicht. Sie müssen den ursprünglichen Ereignishandler auch in jquery hinzufügen:

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

Dann hat die jquery einen Verweis auf den Eventhandler und kann diesen entfernen:

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

VoidKing erwähnt dies in einem obigen Kommentar etwas schärfer.

11
davaus

Wenn das Ereignis angehängt ist auf diese Weise und das Ziel nicht angehängt werden soll:

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

});​
11
user669677

aktualisiert für 2014

Mit der neuesten Version von jQuery können Sie jetzt alle Ereignisse in einem Namespace aufheben, indem Sie einfach $( "#foo" ).off( ".myNamespace" ); ausführen.

9
alexpls

Danke für die Auskunft. Sehr hilfreich Ich habe es zum Sperren der Seiteninteraktion verwendet, während sich ein anderer Benutzer im Bearbeitungsmodus befand. Ich habe es in Verbindung mit ajaxComplete verwendet. Nicht unbedingt das gleiche Verhalten, aber etwas ähnlich.

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

function executePageLock(){
    //do something
}
7
jquery_user

Die beste Methode zum Entfernen von Inline-Onclick-Ereignissen ist $(element).prop('onclick', null);

7
Shahrukh Azeem

Für removeALLevent-handlers hat das bei mir funktioniert:

Um alle Event-Handler zu entfernen, müssen Sie den einfachen HTML structure ohne den gesamten event handlers an den element und dessen child nodes anhängen. Dazu hat jQuery's clone() geholfen.

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

Damit haben wir den clone anstelle des original ohne event-handlers.

Viel Glück...

5
Akash

Für den Fall, dass die .on() -Methode zuvor mit einem bestimmten Selektor verwendet wurde, wie im folgenden Beispiel:

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

Die beiden Methoden unbind() und .off() funktionieren nicht .

Die . Undelegate () -Methode kann jedoch verwendet werden, um den Handler für alle Elemente, die dem aktuellen Selektor entsprechen, vollständig aus dem Ereignis zu entfernen:

$("body").undelegate(".dynamicTarget", "click")
5
Ilia Rostovtsev

Dies funktioniert auch gut. Einfach und einfach. Siehe http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");
3
Somnath Kharat

wenn Sie onclick über html einstellen, müssen Sie removeAttr ($(this).removeAttr('onclick'))

wenn Sie es über jquery einstellen (wie nach dem ersten Klick in meinen obigen Beispielen), müssen Sie unbind($(this).unbind('click'))

2
Ishan Liyanage

Wenn Sie $(document).on() verwenden, um einem dynamisch erstellten Element einen Listener hinzuzufügen, müssen Sie möglicherweise Folgendes verwenden, um es zu entfernen:

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

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

2
ow3n

Alle beschriebenen Ansätze haben bei mir nicht funktioniert, da ich das click-Ereignis mit on() zu dem Dokument hinzugefügt habe, in dem das Element zur Laufzeit erstellt wurde:

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


Mein Workaround:

Da ich die ".button" -Klasse nicht aufheben konnte, habe ich der Schaltfläche mit den gleichen CSS-Stilen eine andere Klasse zugewiesen. Damit ignorierte der Live-/Event-Handler den Klick endgültig:

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

Ich hoffe, das hilft.

1
Kai Noack

Ich weiß, dass dies zu spät kommt, aber warum nicht einfach JS verwenden, um das Ereignis zu entfernen?

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

oder, wenn Sie eine benannte Funktion als Ereignishandler verwenden:

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

Hoffe mein unten stehender Code erklärt alles. 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>
1
mysticmo