Eu tenho um evento de clique atribuído a um div de uma determinada classe. Quando o clique ocorre, a classe é removida do div. No entanto, você ainda pode clicar no div e noclick() evento é acionado (mesmo que a classe tenha sido removida). Aqui está um exemplo:

HTML:

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

JavaScript / jQuery:

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

Eu posso ver as classes são removidas e adicionadas (como a cor do texto mudou de acordo com o meu CSS). No entanto, você ainda pode clicar no div várias vezes ealert() ainda aparecerá.

Isso também parece ocorrer ao contrário; Então, se eu adicionar oclickable class para um div, o código em$('.clickable').click(function() {...}); não é executado (mas visualmente, o div muda de acordo com os novos estilos).

Como posso fazer com que os eventos de clique correspondam às classes, mesmo depois que o jQuery adicionar / removerclickable classe?