Habilitar/Deshabilitar eventos de elementos DOM con JS/jQuery

Question

Me he quedado aquí con un pequeño problema que he puesto bastante tiempo en el que es bastante malo en comparación con su funcionalidad.

tengo etiquetas en mi DOM, y yo he sido vinculante varios eventos a ellos con jQuery ..

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

A veces me gustaría desactivar algunos de estos elementos, lo que significa que añadir CSS-Class 'desactivado' y me gustaría eliminar todos los eventos, por lo que ya no se activan más eventos. He creado una clase llamada aquí "botón" para resolver ese

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

que puede eliminar todos los eventos de un objeto jQuery con $ .unbind. Pero también me gustaría tener la característica opuesta

button.enable() 

que se une todos los eventos con todos los manipuladores de vuelta al elemento O tal vez hay una característica en jQuery que realmente nows cómo hacerlo ?!

Mi clase Button se ve algo similar a esto:

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

¿Alguna idea? Especialmente esta funcionalidad revinculación debe estar disponible después de desactivar -> Habilitar

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

me encontré con estas fuentes que no funcionó para mí: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> No soy la creación de los eventos dentro de la clase de botón

Agradecemos su ayuda.

Answer 1

Puede usar un <input type="button"> y luego usar $("#buttonID").addAttr('disabled', 'disabled'); y $("#buttonID").removeAttr('disabled');. La desactivación y la habilitación serán manejadas por el navegador. Todavía puede cambiarlo de aspecto para que parezca un ancla, si lo necesita, eliminando fondos y bordes para el botón. Tenga en cuenta, sin embargo, que algunos márgenes y relleno aún pueden molestarlo en algunos navegadores.

Answer 2

me gustaría ir en esto con enfoque diferente:

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

Esto no puede ser lo que necesita, ya que puede afectar también otras funciones binded en este caso más tarde. La alternativa puede ser modificar las funciones en sí para ser más como:

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

    // do something here 
}); 

si esa es una opción.

Answer 3

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

Devolución falsa es muy importante.

O puede escribir sus propias funciones de habilitación e inhabilitación que hacer algo como:

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

Esto no es un código perfecto, pero estoy seguro de que la idea básica. Restaure el controlador de eventos anterior de los datos del elemento DOM al llamar a habilitar.La desventaja es que deberá usar enable() para agregar cualquier detector de eventos que pueda necesitar ser deshabilitado() d. De lo contrario, el controlador de eventos no se guardará en los datos DOM y no se podrá restaurar con enable() nuevamente. Actualmente, no hay una forma infalible de obtener una lista de todos los oyentes de eventos en un elemento; esto haría el trabajo mucho más fácil.

Answer 4

En lugar de agregar el controlador de eventos a cada elemento por separado, debe usar la delegación de eventos. Haría una estructura mucho más manejable.

• 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

Es por esto que sólo se puede comprobar si hay clase (s) en el elemento se hace clic, y actuar en consecuencia. Y podrás incluso re-editarlos, pero cambiando las clases de una etiqueta.

P.S. lea los enlaces cuidadosamente, para que pueda explicarlo a otros más tarde. La delegación de eventos es una técnica muy importante.