jQuery无法识别鼠标点击事件：卡片点击无响应问题求助

嘿，我一眼就瞅出你的点击事件为啥没反应啦！

核心问题 #

当你执行这段代码的时候：

$('.container__card--hover').click(function(){ ... });

页面上根本不存在带有container__card--hover类的元素——这个类是通过hover事件动态添加到卡片上的，而jQuery的直接事件绑定只会对绑定时刻已经存在于DOM中的元素生效，后来动态添加类的元素根本没被绑定到事件，所以点击自然没反应。

两种可行的解决方案 #

方案1：事件委托（推荐，最稳妥）

把点击事件委托给一个一开始就存在的父元素（比如document，或者卡片的直接父容器），让它监听动态元素的点击事件：

// hover逻辑保持（可以简化写法）
$('.container__card').hover(function(){
  // 不用把原类写进去，toggleClass只会操作指定的类
  $(this).toggleClass('container__card--hover');
});

// 用事件委托绑定点击，适配动态添加的类
$(document).on('click', '.container__card--hover', function(){
  $(this).toggleClass('container__card--selected container__card--hover');
});

原理是事件冒泡：点击卡片时，事件会向上冒泡到document，这时候jQuery会检查触发事件的元素是否匹配.container__card--hover选择器，匹配就执行回调，不管这个类是一开始就有还是后来加的。

方案2：在hover时动态绑定点击事件

如果你不想用事件委托，也可以在hover的时候给当前卡片绑定点击事件（注意要先解绑避免重复绑定）：

$('.container__card').hover(function(){
  const $currentCard = $(this);
  $currentCard.toggleClass('container__card--hover');
  
  // 先解绑再绑定，防止多次hover导致重复触发
  $currentCard.off('click').on('click', function(){
    $currentCard.toggleClass('container__card--selected container__card--hover');
  });
});

小优化建议 #

你的toggleClass写法可以简化：不需要把container__card也放进参数里，因为这个类是卡片的基础类，应该一直保留。toggleClass('container__card--hover')只会添加/移除这个hover类，不会影响原有的基础类，逻辑更清晰也不容易出错。

内容的提问来源于stack exchange，提问作者user6898463