Najlepszy sposób na usunięcie modułu obsługi zdarzeń w jQuery?

Mam input type="image". To działa jak notatki komórkowe w Microsoft Excel. Jeśli ktoś wpisze liczbę w pole tekstowe, z którym input-imagejest ona sparowana, skonfiguruję moduł obsługi zdarzeń dla input-image. Następnie, gdy użytkownik kliknie przycisk image, pojawi się małe okno podręczne, aby dodać notatki do danych.

Mój problem polega na tym, że gdy użytkownik wpisuje zero w polu tekstowym, muszę wyłączyć moduł input-imageobsługi zdarzeń. Próbowałem następujących, ale bezskutecznie.

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

jQuery ≥ 1,7

Począwszy od jQuery 1.7 API zdarzeń zostało zaktualizowane, .bind()/ .unbind()są nadal dostępne dla kompatybilności wstecznej, ale preferowaną metodą jest użycie funkcji on () / off () . Poniżej byłoby teraz

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

W przykładowym kodzie po prostu dodajesz kolejne zdarzenie kliknięcia do obrazu, nie zastępując poprzedniego:

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

Oba zdarzenia kliknięcia zostaną uruchomione.

Jak już powiedziano, możesz usunąć cofnięcie wszystkich zdarzeń związanych z kliknięciem:

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

Jeśli chcesz dodać pojedyncze zdarzenie, a następnie je usunąć (bez usuwania innych, które mogły zostać dodane), możesz użyć przestrzeni nazw zdarzeń:

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

i aby usunąć tylko swoje wydarzenie:

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

Nie było to dostępne, gdy udzielono odpowiedzi na to pytanie, ale można również użyć metody live () , aby włączyć / wyłączyć zdarzenia.

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

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

Z tym kodem stanie się to, że kliknięcie przycisku #mydisable spowoduje dodanie klasy wyłączonej do elementu #myimage. Sprawi to, że selektor nie będzie już pasował do elementu, a zdarzenie nie zostanie uruchomione, dopóki klasa „disabled” nie zostanie usunięta, dzięki czemu selektor .live () znów będzie ważny.

Ma to inne zalety, dodając również stylizację opartą na tej klasie.

Jeśli chcesz odpowiedzieć na zdarzenie tylko raz , poniższa składnia powinna być naprawdę pomocna:

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

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

Za pomocą arguments.callee możemy zagwarantować, że jeden konkretny moduł obsługi funkcji anonimowych zostanie usunięty, a tym samym mieć pojedynczy moduł obsługi czasu dla danego zdarzenia. Mam nadzieję, że to pomaga innym.

Można to zrobić za pomocą funkcji unbind.

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

Możesz dodać wiele procedur obsługi zdarzeń do tego samego obiektu i zdarzenia w jquery. Oznacza to, że dodanie nowego nie zastępuje starych.

Istnieje kilka strategii zmiany procedur obsługi zdarzeń, takich jak przestrzenie nazw zdarzeń. Dokumenty online zawierają kilka stron na ten temat.

Spójrz na to pytanie (tak nauczyłem się unbind). W odpowiedziach znajduje się użyteczny opis tych strategii.

Jak czytać funkcje wywołania zwrotnego związanego z dymem w jquery

może metoda unbind zadziała dla ciebie

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

Musiałem ustawić to zdarzenie na zero, używając rekwizytów i attr. Nie mogłem tego zrobić z jednym lub drugim. Nie mogłem też zmusić .unbind do pracy. Pracuję nad elementem TD.

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

Jeśli zdarzenie jest dołączone w ten sposób , a cel ma zostać odłączony:

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

});​

Być może dodajesz onclickmoduł obsługi jako znacznik wbudowany:

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

Jeśli tak, jquery .off()lub .unbind()nie będzie działać. Musisz również dodać oryginalny moduł obsługi zdarzeń w jquery:

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

Następnie jquery ma odwołanie do procedury obsługi zdarzeń i może ją usunąć:

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

VoidKing wspomina o tym nieco bardziej skośnie w komentarzu powyżej.

Zaktualizowano w 2014 r

Korzystając z najnowszej wersji jQuery, możesz teraz odłączyć wszystkie zdarzenia w przestrzeni nazw, po prostu wykonując te czynności $( "#foo" ).off( ".myNamespace" );

Najlepszym sposobem na usunięcie wbudowanego zdarzenia onclick jest $(element).prop('onclick', null);

Dla remove WSZYSTKICH event-handlers to właśnie działało dla mnie:

Usunięcie wszystkich programów obsługi zdarzeń oznacza posiadanie zwykłego interfejsu HTML structurebez wszystkich event handlersdołączonych do niego elementi jego child nodes. Aby to zrobić, jQuery's clone()pomógł.

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

Dzięki temu będziemy mieć clonemiejsce na „ originalbez” event-handlers.

Powodzenia...

Dzięki za informację. bardzo pomocne Użyłem go do blokowania interakcji strony w trybie edycji przez innego użytkownika. Użyłem go w połączeniu z ajaxComplete. Niekoniecznie to samo zachowanie, ale nieco podobne.

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

function executePageLock(){
    //do something
}

W przypadku, gdy .on()wcześniej użyto metody z określonym selektorem, jak w poniższym przykładzie:

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

Zarówno unbind()i .off()metody nie zadziała.

Jednakże .undelegate () Sposób może być wykorzystywany, aby całkowicie usunąć z obsługi zdarzenia dla wszystkich elementów, które pasują do wybranego przełącznika:

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

Jeśli używasz, $(document).on()aby dodać detektor do dynamicznie tworzonego elementu, być może będziesz musiał użyć następujących elementów, aby go usunąć:

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

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

Działa to również dobrze. Proste i łatwe. Patrz http://jsfiddle.net/uZc8w/570/

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

jeśli ustawisz onclickvia html, musiszremoveAttr ($(this).removeAttr('onclick'))

jeśli ustawisz to za pomocą jquery (jak po pierwszym kliknięciu w moich przykładach powyżej), musisz to zrobić unbind($(this).unbind('click'))

Wiem, że to się spóźnia, ale dlaczego nie użyć zwykłego JS do usunięcia zdarzenia?

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

lub, jeśli używasz nazwanej funkcji jako procedury obsługi zdarzeń:

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

Wszystkie opisane podejścia nie działały dla mnie, ponieważ dodawałem zdarzenie click on()do do dokumentu, w którym element został utworzony w czasie wykonywania:

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

Moje obejście:

Ponieważ nie mogłem odłączyć klasy „.button”, właśnie przypisałem inną klasę do przycisku, który miał te same style CSS. W ten sposób moduł obsługi zdarzeń na żywo / zdarzenia zignorował wreszcie kliknięcie:

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

Mam nadzieję, że to pomaga.

Mam nadzieję, że mój poniższy kod wyjaśnia wszystko. 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>

Po prostu usuń to z przycisku:

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