Question

I have a problem with removing classes with jquery.

I wanted to add and remove a class on click on the class but it doesn’t work. Why?

$('.class').click(function() {
    $(this).addClass("class1");
    $(this).removeClass("class");
});

The hide function works fine (also $(this).hide()) but the image changing not works after that:

$('.class').mouseenter(function() {
    jQuery(this).attr("src", 'icons/heart.png');
}).mouseleave(function() {
    jQuery(this).attr("src", 'icons/heart_disabled.png' );
});

$('.class1').mouseenter(function() {
    jQuery(this).attr("src", 'icons/heart_disabled.png');
}).mouseleave(function() {
    jQuery(this).attr("src", 'icons/heart.png' );
});

so I think the class not changed.

Answer 1

You should delegate the events, event handlers are bound to the elements not class names, that’s why you think that classes are not added/removed, try the following:

$(document).on({
   mouseenter: function() {
      this.src = 'icons/heart.png';
   },
   mouseleave: function() {
      this.src = 'icons/heart_disabled.png';
   }
}, 'img.class');

$(document).on({
   mouseenter: function() {
      this.src = 'icons/heart_disabled.png';
   },
   mouseleave: function() {
      this.src = 'icons/heart.png';
  }
}, 'img.class1');