jQuery .click()事件异常：一个生效另一个失效，求解决方案

嘿，我来帮你搞定这个点赞切换失效的问题！咱们先搞清楚为啥第二个事件不工作，再给你几个靠谱的实现方案~

问题根源 #

你当前代码里，$('.unlike-btn').click() 事件无法触发的核心原因很明确：jQuery的普通.click()绑定只会作用于页面加载时就已经存在的DOM元素。

初始页面里，你的图标类是.like-unlike-btn like-btn，.unlike-btn这个类是点击之后才动态添加的——页面加载完成时根本没有带这个类的元素，所以这个事件绑定相当于“绑定了个寂寞”，自然不会生效。

修复方案1：使用事件委托（最稳妥的动态元素绑定方式） #

事件委托利用DOM的事件冒泡机制，把事件绑定到一个页面加载时就存在的父元素（比如document，或者更靠近目标元素的容器），当目标元素触发事件时，父元素会捕获并处理它。这样不管元素的类是动态添加还是移除的，都能正确触发事件：

// 推荐绑定到更具体的父元素，比如图标所在的容器，这里用document做示例
$(document).on('click', '.like-btn', function(e) {
  $(e.target).removeClass('like-btn').addClass('unlike-btn');
});

$(document).on('click', '.unlike-btn', function(e) {
  $(e.target).removeClass('unlike-btn').addClass('like-btn');
});

修复方案2：简化逻辑，用toggleClass一次性切换类 #

其实不用分开写两个事件，直接用jQuery的toggleClass方法，一次切换两个类的状态，代码更简洁，而且因为初始元素存在，直接绑定就能生效：

$('.like-unlike-btn').click(function() {
  $(this).toggleClass('like-btn unlike-btn');
});

这个方法会自动判断当前元素的类，存在就移除，不存在就添加，完美实现点赞/取消的切换效果。

其他实现方式：原生JavaScript（无需jQuery） #

如果你不想依赖jQuery，用原生JS也能轻松实现，两种写法供你选：

方式A：直接绑定到初始元素 #

const likeToggleBtn = document.querySelector('.like-unlike-btn');
likeToggleBtn.addEventListener('click', function() {
  this.classList.toggle('like-btn');
  this.classList.toggle('unlike-btn');
});

方式B：事件委托写法（适合多个点赞按钮的场景） #

document.addEventListener('click', function(e) {
  if (e.target.matches('.like-btn')) {
    e.target.classList.replace('like-btn', 'unlike-btn');
  } else if (e.target.matches('.unlike-btn')) {
    e.target.classList.replace('unlike-btn', 'like-btn');
  }
});

你的CSS和HTML代码都不需要修改，只需要替换对应的JS部分就可以正常工作啦~

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