Abilita/Disabilita eventi di elementi DOM con JS/jQuery

Question

Mi sono bloccato qui con un piccolo problema Ho messo abbastanza tempo in cui è piuttosto male rispetto alla sua funzionalità.

ho tag nel mio DOM, e sono stato legando diversi eventi a loro con jQuery ..

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

A volte vorrei disattivare alcuni di questi elementi, il che significa che aggiungo un CSS-Class 'disabilitato' ad esso e mi piacerebbe rimuovere tutti gli eventi, quindi nessun evento viene attivato affatto. Ho creato una classe che qui chiamano "pulsante" per risolvere che

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

posso rimuovere tutti gli eventi da un oggetto jQuery con $ .unbind. Ma vorrei anche avere la funzione opposta

button.enable() 

che lega tutti gli eventi con tutti i gestori torna l'elemento O forse c'è una caratteristica in jQuery che nows realtà come fare ?!

My Button Classe osserva qualcosa di simile a questo:

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 
    } 
} 

Tutte le idee? Soprattutto questa funzionalità rebind deve essere disponibile dopo la disabilitazione -> Abilita

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

ho trovato queste fonti che non ha funzionato per me: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> Io non pongo gli eventi all'interno della classe tasto

Apprezzo il tuo aiuto.

Answer 1

È possibile utilizzare uno <input type="button"> e quindi utilizzare $("#buttonID").addAttr('disabled', 'disabled'); e $("#buttonID").removeAttr('disabled');. La disabilitazione e l'abilitazione verranno gestite dal browser. Puoi comunque ridimensionarlo per sembrare un'ancora, se necessario, rimuovendo gli sfondi e i bordi per il pulsante. Tuttavia, tieni presente che alcuni margini e padding potrebbero infastidirti in alcuni browser.

Answer 2

vorrei andare su questo con diverso approccio:

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

Questo non può essere quello che avete bisogno, dal momento che può effettuare anche altre funzioni rilegati in questo evento in seguito. L'alternativa potrebbe essere quella di modificare le funzioni stesse per essere più simile a:

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

    // do something here 
}); 

se questa è un'opzione.

Answer 3

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

Il ritorno di falso è molto importante.

Oppure si potrebbe scrivere i propri abilitare e disabilitare le funzioni che fanno qualcosa di simile:

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

Questo non è il codice perfetto, ma sono sicuro che si ottiene l'idea di base. Ripristina il vecchio gestore eventi dai dati DOM dell'elemento quando si chiama enable.Lo svantaggio è che dovrai abilitare enable() per aggiungere qualsiasi listener di eventi che potrebbe essere necessario disabilitare() d. In caso contrario, il gestore eventi non verrà salvato nei dati DOM e non potrà essere ripristinato nuovamente con enable(). Al momento, non esiste un modo infallibile per ottenere un elenco di tutti gli ascoltatori di eventi su un elemento; questo renderebbe il lavoro molto più facile.

Answer 4

Invece di aggiungere il gestore di eventi a ciascun elemento separatamente, è necessario utilizzare la delega degli eventi. Sarebbe una struttura molto più gestibile.

• 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

questo il motivo per cui si può solo verificare la presenza di classe (i) sull'elemento cliccato, e agire di conseguenza. E sarai anche in grado di ri-inserirli, cambiando le classi di un tag.

P.S. leggere attentamente i collegamenti, in modo da poterli spiegare agli altri in un secondo momento. La delega degli eventi è una tecnica molto importante.