Włączanie/wyłączanie zdarzeń elementów DOM za pomocą JS/jQuery

Question

Utknąłem tutaj z małym problemem, włożyłem dość dużo czasu, w którym jest dość źle w porównaniu do jego funkcjonalności.

Mam tagi w moim DOM, i ja wiązania kilka imprez do nich z jQuery ..

var a = $('<a>').click(data, function() { ... }) 

Czasem chciałbym, aby wyłączyć niektóre z tych elementów, co oznacza, że ​​dodać CSS-Klasa "wyłączony" i chciałbym usunąć wszystkie zdarzenia, więc żadne zdarzenia nie są już uruchamiane. Stworzyłem klasę o nazwie „przycisk”, aby rozwiązać ten

var button = new Button(a) 
button.disable() 

mogę usunąć wszystkie zdarzenia z obiektu jQuery z $ .unbind. Ale chciałbym również mieć odwrotny funkcję

button.enable() 

która wiąże wszystkie zdarzenia ze wszystkimi koparki z powrotem do elementu LUB może jest jakaś funkcja w jQuery, że faktycznie nows jak to zrobić ?!

Mój przycisk Klasa wygląda coś podobnego do tego:

Button = function(obj) { 
    this.element = obj 
    this.events = null 

    this.enable = function() { 
    this.element.removeClass('disabled') 
    obj.data('events', this.events) 
    return this 
    } 

    this.disable = function() { 
    this.element.addClass('disabled') 
    this.events = obj.data('events') 
    return this 
    } 
} 

jakieś pomysły? Zwłaszcza ta funkcja ponownego wiązania muszą być dostępne po Wyłącz -> enable

var a = $('<a>').click(data, function() { ... }) 

Znalazłem te źródła, które nie działają na mnie: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> Nie jestem ustawiania zdarzeń w klasie przycisk

Doceń swoją pomoc.

Answer 1

Można użyć <input type="button">, a następnie użyć $("#buttonID").addAttr('disabled', 'disabled'); i $("#buttonID").removeAttr('disabled');. Wyłączanie i włączanie będzie obsługiwane przez przeglądarkę. Nadal możesz zmienić go tak, by wyglądał jak kotwica, jeśli potrzebujesz tego, usuwając tła i obramowania dla przycisku. Należy jednak pamiętać, że niektóre marginesy i dopełnienia mogą nadal powodować usterki w niektórych przeglądarkach.

Answer 2

pójdę na to z innego podejścia:

<a id="link1">Test function</a> 
<a id="link2">Disable/enable function</a> 

<script type="text/javascript"> 
    $(function() { 
     // this needs to be placed before function you want to control with disabled flag 
     $("#link1").click(function(event) { 
      console.log("Fired event 1"); 
      if ($(this).hasClass('disabled')) { 
       event.stopImmediatePropagation(); 
      } 
     }); 

     $("#link1").click(function() { 
      console.log("Fired event 2"); 
     }); 

     $("#link2").click(function() { 
      $("#link1").toggleClass("disabled"); 
     }); 
    }); 
</script> 

To nie może być to, czego potrzebują, ponieważ może to wpływać także inne funkcje binded do tego wydarzenia później. Alternatywą może być modyfikowanie samych funkcji, aby były bardziej podobne:

$("#link1").click(function(event) { 
    console.log("Fired event 1"); 
    if ($(this).hasClass('disabled')) { 
     return; 
    } 

    // do something here 
}); 

jeśli jest to opcja.

Answer 3

$("a").click(function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return false; 
}); 

Zwracanie wartości false jest bardzo ważne.

Albo można pisać własne włączania i wyłączania funkcji, które robią coś takiego:

function enable(element, event, eventHandler) { 
    if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking 
     element.bind(event, element.data()[event]); 

    } 
    else (!element.data()[event] && eventHandler) { 
     element.bind(event, element.data()[event]); 
     element.data({event: eventHandler}); //We save the event handler for future enable() calls 
    } 
} 

function disable(element, event) { 
    element.unbind().die(); 
} 

Ten kod nie jest doskonały, ale jestem pewien, że masz podstawową ideę. Przywróć stary moduł obsługi zdarzeń z danych DOM elementu podczas wywoływania enable.Minusem jest to, że będziesz musiał użyć funkcji enable(), aby dodać dowolny detektor zdarzeń, który może wymagać wyłączenia() d. W przeciwnym razie program obsługi zdarzeń nie zostanie zapisany w danych DOM i nie będzie mógł zostać przywrócony ponownie za pomocą funkcji enable(). Obecnie nie ma niezawodnego sposobu na uzyskanie listy wszystkich detektorów zdarzeń na elemencie; to znacznie ułatwiłoby pracę.

Answer 4

Zamiast dodawać obsługę zdarzeń do każdego elementu osobno, należy użyć delegowania zdarzeń. Zapewniłoby to o wiele łatwiejszą do zarządzania strukturę.

• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
• http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

To dlatego można po prostu sprawdzić na klasy (ów) na klikniętego elementu i podjąć odpowiednie działania. I będziesz w stanie nawet je odzyskać, jsut zmieniając klasy tagu.

P.S. uważnie przeczytaj linki, aby później wyjaśnić je innym. Delegacja wydarzeń jest bardzo ważną techniką.