jQuery click() todavía se activa después de que se elimine .clickable class

Question

Tengo un evento click asignado a un div de una clase en particular. Cuando se produce el clic, la clase se elimina del div. Sin embargo, aún puede hacer clic en el div y se desencadena el evento click() (aunque la clase ya se haya eliminado). He aquí un ejemplo:

HTML:

<div class="clickable"> 
    <p>Click me</p> 
</div> 

JavaScript/jQuery:

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

puedo ver las clases se retiran y se añaden (como el color del texto cambiaba como por mi CSS). Sin embargo, aún puede hacer clic en el div varias veces y seguirá apareciendo alert().

Esto también parece ocurrir a la inversa; entonces si agrego la clase clickable a un div, el código en $('.clickable').click(function() {...}); no se ejecuta (pero visualmente, el div cambia según los nuevos estilos).

¿Cómo puedo hacer para que los eventos de clic coincidan con las clases, incluso después de que jQuery agregue/elimine la clase clickable?

Answer 1

Cuando conecta un controlador de eventos a un elemento DOM, se mantiene intacta. La clase es solo una forma de referenciar el elemento, y cambiar la clase no desvinculará los manejadores de eventos, para eso tendrás que desvincular manualmente el manejador, y si usar jQuery 1.7+ on() y off() es el camino a seguir:

$('.clickable').on('click', function() { 
    $(this).removeClass('clickable').addClass('not-clickable').off('click'); 
}); 

esto haría que el único elemento que se puede hacer clic una vez, y se podía utilizar el construido en función de one() lugar, ya que esto desenlazar el controlador automágicamente después del primer clic:

$('.clickable').one('click', function() { 
    $(this).removeClass('clickable').addClass('not-clickable'); 
}); 

Answer 2

unbind evento de clic - como $(this).unbind('click');' Prueba este

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    $(this).unbind('click');' 
}); 

Answer 3

$(document).on('click', '.clickable', function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

Answer 4

$('.clickable').live('click',function() { 
    $(this).removeClass('clickable');//remove the class 
    $(this).unbind('click');//to remove the click event 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

Answer 5

Su comprensión de la asignación pareja es un poco incorrecta. Por favor, lea el código de

$('.clickable').click(function() 

1. Encuentra elemento con la clase '.clickable'
2. Asignar onclick manejador al elemento

ver, es el elemento que llegar de manejador , no el nombre de la clase. Debe quitar el controlador.Para que usted puede probar:

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
    $(this).unbind('click'); 
}); 

Answer 6

Se puede usar esta

$(document.body).delegate('.clickable', 'click', function(e){ 
    $(this).removeClass('clickable'); 
    alert('Clicked!'); 
}); 

partir de la versión de jQuery 1.7 delegate() es sustituida por la on()

$(document.body).on('click', '.clickable', function(e){ 
    $(this).removeClass('clickable'); 
    alert('Clicked!'); 
}); 

O

$('.clickable').on('click', function(e){ 
    $(this).removeClass('clickable').off('click'); 
    alert('Clicked!'); 
}); 

también puede utilizar el método one() - es igual a unirse, pero se produce una vez

$('.clickable').one('click', function(e){ 
    alert('Clicked!'); 
}); 

Answer 7

Si desea llamar clic evento sólo una vez usar jQuery one función para enlazar eventos se destruirá.

$('.clickable').one('click',function() { 
    $(this).removeClass('clickable');//remove the class 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
});