Jquery 按一下换课有时会卡住

我有这段代码，它可以完成它需要做的事情，但有时会卡住（单击有时不会更改类）。为什么？

---

问题是因为您正在嵌套事件处理程序；在本例中，

鼠标指针内的
单击
。因此，每次按钮出现问题时，您都会创建另一个单击处理程序

从代码的上下文来看，您似乎希望“模式”在按钮悬停时隐藏/显示，但在单击按钮时也保持可见。因此，您可以向模式中添加一个类，您可以检查该类，然后在相关事件触发时不隐藏该元素

还请注意，您可以通过使用CSS类而不是在JS逻辑中嵌入CSS规则来改进逻辑。试试这个：


let$modal=$（'.modal'）；
$（“#按钮”）。悬停（函数（e）{
$modal.addClass（'show'）；
}，函数（）{
$modal.not（'.on'）.removeClass（'show'）；
}).on（'单击'，函数（）{
$（this.add（$modal.toggleClass（'on'）；
});
正文{
保证金：0自动；
}
#钮扣{
背景色：红色；
宽度：200px；
高度：40px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
光标：指针；
}
#巴顿{
背景色：#0C0；
}
.莫代尔{
宽度：500px；
不透明度：0；
高度：200px；
保证金：0自动；
边框：1px纯灰；
不透明度：0；
过渡：不透明度；
}
.modal.show{
不透明度：1；
}
.模态h1，
p{
文本对齐：居中；
}

按钮

标题
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

您要在每个
鼠标指针上添加一个新的
单击
处理程序
事件（
.hover（）
的第一个函数）。那不可能是对的……；）旁注；这是很多非干式
$（this）
调用。
$('#button').hover(function(e) {
  $('.box').css('animation', 'fade-in .3s forwards');
  $(this).css('background-color', 'blue');
  $(this).click(function() {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
    } else {
        $('#button').removeClass();
      $(this).addClass('on');
    }
  });
}, function() {
  if ($(this).hasClass('on')) {
    return;
  } else {
    $('.box').css('animation', 'fade-out .3s forwards');
    $(this).css('background-color', 'red');
  };
})