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

Question

Ich habe eine input type="image". Dies wirkt wie die Zellnotizen in Microsoft Excel. Betritt jemand eine Zahl in das Textfeld, das diese input-image mit, ich Setup einen Ereignishandler für das input-image gekoppelt ist. Dann, wenn der Benutzer die image klickt, bekommen sie ein kleines Pop-up ein paar Notizen zu den Daten hinzuzufügen.

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

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

Answer 1

jQuery ≥ 1.7

Mit jQuery 1.7 weiter das Ereignis API aktualisiert wurde, .bind() / .unbind() sind nach wie vor für die Abwärtskompatibilität zur Verfügung, aber die bevorzugte Methode ist mit der on () / off () Funktionen. Die unten 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 Beispiel Code, den Sie sind einfach das Hinzufügen eines weiteren Klick-Ereignis auf das Bild, überschreiben nicht die vorherige:

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

Beide Click-Ereignisse werden dann gefeuert werden.

Wie Leute haben gesagt, Sie unbind können Sie alle Click-Ereignisse entfernen:

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

Wenn Sie ein einzelnes Ereignis hinzufügen und entfernen Sie sie dann (ohne andere zu entfernen, die hinzugefügt worden sein könnte), dann können Sie Ereignis Namespacing verwenden:

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

und entfernen Sie einfach Ihre Veranstaltung:

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

Answer 2

Das war nicht verfügbar, wenn diese Frage beantwortet wurde, aber Sie können auch die leben () Verfahren / deaktivieren Ereignisse zu aktivieren.

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

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

Was ist mit diesem Code passieren wird, ist, dass, wenn Sie auf #mydisablebutton, es wird die Klasse fügt das #myimage Element deaktiviert. Dadurch wird es so, dass die Wähler nicht mehr das Element entspricht, und das Ereignis wird nicht ausgelöst werden, bis die ‚behindert‘ Klasse entfernt macht die .live () Wähler wieder gültig.

Dies hat noch weitere Vorteile durch Styling Zugabe auf der Grundlage dieser Klasse auch.

Answer 3

Dies kann mit Hilfe der unbind Funktion erfolgen.

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

Sie können mehrere Event-Handler auf das gleiche Objekt und Ereignis in jquery hinzuzufügen. Das bedeutet, eine neue Zugabe nicht die alten ersetzen.

Es gibt mehrere Strategien zum Ändern Event-Handler, wie Event-Namespaces. Es gibt einige Seiten über diese in der Online-Dokumentation.

auf diese Frage suchen (das ist, wie ich von unbind gelernt). Es gibt einige nützliche Beschreibung dieser Strategien in den Antworten.

Wie gebundene Hover-Callback-Funktionen in jquery lesen

Answer 4

Wenn Sie auf ein Ereignis reagieren wollen 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 die eine bestimmte anonyme Funktions-Handler entfernt wird, und haben somit ein einziges Mal Handler für ein bestimmtes Ereignis. Hoffe, das hilft anderen.

Answer 5

vielleicht die unbind Methode für Sie arbeiten

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

Answer 6

Ich hatte das Ereignis, um den prop und die attr auf null verwenden. Ich konnte es nicht mit dem einen oder anderen. Ich konnte auch nicht bekommen .unbind zu arbeiten. Ich arbeite an einem TD-Elemente.

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

Answer 7

Wenn Ereignis angebracht ist diese Art und Weise , und das Ziel ist ungebunden zu sein:

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

Sie können die onclick Handler als Inline-Markup werden hinzugefügt:

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

Wenn ja, die jquery .off() oder .unbind() wird nicht funktionieren. Sie benötigen die Original-Event-Handler in jquery hinzuzufügen auch:

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

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

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

VoidKing erwähnt dies ein wenig schräg in einem Kommentar oben.

Answer 9

Aktualisiert für 2014

die neueste Version von jQuery verwenden, sind Sie nun in der Lage, alle Ereignisse auf einem Namespace zu lösen, indem Sie einfach $( "#foo" ).off( ".myNamespace" ); tun

Answer 10

Der beste Weg, Inline-Onclick-Ereignis zu entfernen, ist $(element).prop('onclick', null);

Answer 11

Danke für die Information. sehr hilfreich verwendet i it Seite Interaktion im Bearbeitungsmodus von einem anderen Benutzer zu sperren. Ich benutzte es, in Verbindung mit ajaxComplete. Nicht das gleiche Verhalten necesarily aber ein wenig ähnlich.

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

function executePageLock(){
    //do something
}

Answer 12

Bei .on() Verfahren vorher mit bestimmten Selektor verwendet wurde, wie im folgenden Beispiel:

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

Sowohl unbind() und .off() Methoden nicht zur Arbeit gehen.

Allerdings .undelegate () Verfahren verwendet werden, um vollständig Handler von der Veranstaltung für alle zu entfernen Elemente, die den aktuellen Selektor entsprechen:

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

Answer 13

Um remove alle event-handlers, das ist was für mich gearbeitet:

So entfernen Sie alle Handler Ereignisse, die die Ebene HTML structure ohne den ganzen event handlers zum element und seine child nodes angebracht haben. Dazu half jQuery's clone().

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 wir die clone anstelle des original ohne event-handlers auf sie haben.

Good Luck ...

Answer 14

Dies funktioniert auch .Einfache und easy.see http://jsfiddle.net/uZc8w/570/

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

Answer 15

Wenn Sie die onclick über html einstellen müssen Sie removeAttr ($(this).removeAttr('onclick'))

Wenn Sie legen Sie es über jquery (wie die nach dem ersten Klick in meinen Beispielen oben), dann müssen Sie unbind($(this).unbind('click'))

Answer 16

die Ansätze beschrieben Alle nicht für mich arbeiten, weil ich das Click-Ereignis mit on() das Dokument hinzugefügt wurde, in dem das Element zur Laufzeit erstellt wurde:

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

Meine Abhilfe:

Als ich die „.Taste“ Klasse unbind konnte ich nur eine andere Klasse der Schaltfläche zugewiesen, die die gleichen CSS-Stile hatte. Dadurch ignoriert, so dass die live / on-Event-Handler den Klick schließlich:

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

Ich hoffe, das hilft.

Answer 17

Hoffe mein Code unten 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>

Answer 18

Ich weiß, das Ende kommt, aber warum nicht schlicht JS verwenden, um die Veranstaltung zu entfernen?

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

oder, wenn Sie eine benannte Funktion als Event-Handler verwenden:

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

Answer 19

Wenn Sie $(document).on() verwenden, um einen Zuhörer zu einem dynamisch erstellten Elemente hinzufügen, dann können Sie die folgenden verwenden, um es zu entfernen:

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

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