点击事件无法识别新类

Question

我有一个jQuery改变了元素上的类：

$(".droppable").droppable({
  scope: "items",
  drop: function(event, ui) {
    var draggableId = ui.draggable.attr("val");

    if ($(this).parent().hasClass('loc_0')) {
      $(ui.draggable).removeClass('cl1 cl2 cl3').addClass('cl4');
    }
  }
}

这样可以正常工作并相应地更改类。但是我也有一个按钮，当点击时隐藏任何类cl1。

$("#buttonName").on('click', function() {
  $('.cl1, .cl2, .cl3').fadeOut(function() {
    $('.cl4').fadeIn();
  });
})

问题在于，即使课程已更改为cl4，它仍然会被隐藏，就像它仍然有cl1一样。

如何告诉按钮查看当前的课程而不是旧课程？