Jquery 单击事件无法识别新类

我有一段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

---

我如何告诉按钮查看当前类而不是旧类？

JSFIDLE会有所帮助……查看完整的工作版本会有所帮助，这样我们就可以看到逻辑流。但是，问题可能是因为更改类名不会影响与原始类一起放置在元素上的任何事件处理程序。您可能需要使用委派的事件处理程序，或者调用

off（）

来解除处理程序的绑定。您可以在一个新的环境中重新创建问题吗？（或fiddle）在处理程序中添加一个

警报

或

控制台。记录

，查看调用它的频率。也许临时注释掉淡出/淡出代码，看看是否还有其他处理程序没有找到。