Eliminar una clase no deshabilita la función de escucha de eventos asociada con la clase eliminada

Question

Hice un violín para demostrar mi problema.

Tengo problemas para desactivar una función activada por una clase, ¿alguna idea?

$(document).ready(function(){

  $('.changeText').click(function(){
    $(this).html( $(this).html() == 'Test' ? 'Changed' : 'Test' );
  });

  $('.changeBG').click(function(){
    $(this).css('background-color', 'red');
  });

  /* in some cases I need to turn off changeBG function */

  $('.changeBG').removeClass('changeBG');
  // but if you click the div it still turns into red.

});

Gracias de antemano.

javascript jquery

5

user4227915 11 dic. 2015 a las 16:52

Answer 1

Podría delegar el controlador de eventos a un antepasado común.

Al hacerlo, solo funcionará si ese elemento tiene esa clase específica porque se realiza una verificación cuando el evento click realmente se dispara (en lugar de cuando se adjunta el controlador de eventos).

Ejemplo aquí

$(document).on('click', '.changeBG', function(){
    $(this).css('background-color', 'red');
});

En el ejemplo anterior, document es el ancestro común. Dependiendo de su marcado, es probable que desee cambiar eso al elemento ancestro constante más cercano para que el evento no se active cada vez que haga clic en document.

Alternativamente, también puede usar el método .off() y eliminar ese controlador de eventos específico utilizando espacios de nombres de eventos.

Puede adjuntar un evento click específico llamado click.changeBG:

$('.changeBG').on('click.changeBG', function(){
    $(this).css('background-color', 'red');
});

Luego elimine ese evento específico usando .off('click.changeBG'):

Ejemplo aquí

$('.changeBG').removeClass('changeBG').off('click.changeBG');

8

Josh Crozier 11 dic. 2015 a las 14:11

Answer 2

Esto se debe a que el controlador está asociado al elemento y no a la clase. La clase a la que se refirió al adjuntar es solo un filtro. Acabas de cambiar la clase. No es el evento que está asociado con él:

// Do this
$('.changeBG').removeClass('.changeBG').off("click");

O, cuando hace clic en verificar para la clase:

$('.changeBG').click(function(){
  if ($(this).hasClass("changeBG"))
    $(this).css('background-color', 'red');
});

1

Praveen Kumar Purushothaman 11 dic. 2015 a las 13:54

Answer 3

Necesita eliminar el controlador directamente:

$('.changeBG').off('click')

Nota: off es jQuery 1.7+, de lo contrario use unbind.

Lo que sucede es que la línea $('.changeText').click(... adjunta un controlador a todos los elementos con la clase changeText. Eliminar la clase no elimina el controlador.

3

Sébastien Deprez 11 dic. 2015 a las 13:53

Eliminar una clase no deshabilita la función de escucha de eventos asociada con la clase eliminada

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript