Frage Der beste Weg, um einen Event-Handler in jQuery zu entfernen?


ich habe ein input type="image". Dies verhält sich wie die Zellnotizen in Microsoft Excel. Wenn jemand eine Nummer in das Textfeld eingibt, dass dies input-image gepaart mit, ich habe einen Event-Handler für die input-image. Wenn der Benutzer dann auf die Schaltfläche klickt image, erhalten sie ein kleines Popup, um den Daten einige Notizen hinzuzufügen.

Mein Problem ist, dass, wenn ein Benutzer eine Null in das Textfeld eingibt, ich die deaktivieren muss input-imageEvent-Handler. Ich habe folgendes versucht, aber ohne Erfolg.

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

969
2017-10-16 15:28


Ursprung


Antworten:


jQuery ≥ 1.7

Mit jQuery 1.7 wurde die Event-API aktualisiert, .bind()/.unbind() Aus Rückwärtskompatibilität sind noch immer verfügbar, aber die bevorzugte Methode ist die Verwendung der auf()/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 anderes 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 click -Ereignisse mithilfe von unbind entfernen:

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

Wenn Sie ein einzelnes Ereignis hinzufügen und es anschließend entfernen möchten (ohne andere möglicherweise hinzugefügte Objekte zu entfernen), können Sie den Ereignis-Namespace verwenden:

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

und um nur dein Event zu entfernen:

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

1494
2017-10-16 21:13



Dies war nicht verfügbar, wenn diese Frage beantwortet wurde, aber Sie können auch die Leben() Methode zum Aktivieren / Deaktivieren von Ereignissen.

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

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

Was mit diesem Code passiert, ist, dass wenn Sie auf #mydisablebutton klicken, wird die Klasse hinzugefügt, die für das #myimage Element deaktiviert ist. Dadurch wird der Selektor nicht mehr mit dem Element übereinstimmen und das Ereignis wird erst ausgelöst, wenn die Klasse 'disabled' entfernt wird und der Selektor '.live ()' wieder gültig wird.

Dies hat weitere Vorteile, wenn Sie Styling auf dieser Klasse hinzufügen.


59
2017-07-23 17:57



Dies kann mithilfe der Unbind-Funktion erfolgen.

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

Sie können mehrere Ereignisprozeduren zu demselben Objekt und Ereignis in jquery 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.

Schau dir diese Frage an (so habe ich gelernt, zu lösen). Es gibt eine nützliche Beschreibung dieser Strategien in den Antworten.

So lesen Sie gebundene Hover-Callback-Funktionen in jquery


37
2017-10-16 15:35



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

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

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

Verwenden arguments.calleekönnen wir sicherstellen, dass der eine spezifische anonyme Funktionshandler entfernt wird, und somit einen einzigen Zeithandler für ein gegebenes Ereignis haben. Hoffe das hilft anderen.


34
2017-08-05 07:29



Vielleicht funktioniert die Methode zum Entbinden für dich

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

29
2017-10-16 15:31



Ich musste das Ereignis mit Hilfe der Prop und der Attr auf null setzen. Ich konnte es nicht mit dem einen oder anderen tun. Ich konnte auch nicht zur Arbeit kommen. Ich arbeite an einem TD-Element.

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

29
2018-03-28 14:44



Sie können die hinzufügen onclick Handler als Inline-Markup:

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

Wenn ja, die Jquery .off() oder .unbind() wird nicht funktionieren. Sie müssen den ursprünglichen Event-Handler auch in jquery hinzufügen:

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

Dann hat die jquery einen Verweis auf den Event-Handler und kann ihn entfernen:

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

VoidKing erwähnt dies etwas schräger in einem Kommentar oben.


10
2018-01-21 22:25



Wenn Ereignis angehängt ist diesen Wegund das Ziel ist nicht angefügt:

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

});​

9
2018-06-26 13:02



Für 2014 aktualisiert

Mit der neuesten Version von jQuery können Sie nun alle Ereignisse in einem Namespace einfach lösen $( "#foo" ).off( ".myNamespace" );


9
2018-02-05 11:39