jQuery click() still being triggered after .clickable class is removed

Question

I\'ve got a click event assigned to a div of a particular class. When the click occurs, the class is removed from the div. However, you can still click the div and the

Answer 1

When you attach an event handler to a DOM element, it stays intact. The class is just a way to reference the element, and changing the class will not unbind the event handlers, for that you will have to manually unbind the handler, and if using jQuery 1.7+ on() and off() is the way to go :

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

this would make the element clickable only once, and you could just use the built in one() function instead, as that will unbind the handler automagically after the first click :

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