jQuery .click()事件失效问题：一个生效另一个不生效求解决方案

嘿，我来帮你拆解这个问题，再给你几个实用的解决办法～

你遇到的问题是动态元素的事件绑定失效：jQuery的.click()方法只会在页面加载完成时，给当前已经存在于DOM中的元素绑定点击事件。你的初始DOM里只有带.like-btn的<i>标签，.unlike-btn这个类是点击后才动态添加的——页面加载时根本没有匹配.unlike-btn的元素，所以这个事件绑定等于白做了，自然不会生效。

另外还要提一句：你原来的代码里直接赋值e.target.classList会覆盖掉所有原有类（比如like-unlike-btn、far、fa-heart），这其实也是个小bug，会导致图标样式丢失哦。

方案1：事件委托（处理动态元素的标准做法） #

事件委托是把事件绑定到一个始终存在的父元素（比如document或者更接近的静态容器），通过事件冒泡来监听动态生成元素的点击事件。这样不管元素的类怎么变，事件都能触发：

// 绑定到document，监听子元素的点击
$(document).on('click', '.like-btn', function(e) {
  // 用removeClass/addClass修改类，保留基础样式类
  $(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直接切换两个状态类，代码更简洁，也不用处理两个事件：

// 绑定初始存在的.like-unlike-btn元素
$('.like-unlike-btn').click(function() {
  // 一次切换两个类：移除一个的同时添加另一个
  $(this).toggleClass('like-btn unlike-btn');
});

这个方法的优势是：只需要绑定一次事件（因为初始元素存在），后续类的动态变化不影响事件触发，而且代码量少很多。

方案3：原生JS实现（如果不想用jQuery） #

如果你之后想脱离jQuery，用原生JS也能轻松实现，同样用事件委托或者监听初始元素：

// 原生JS事件委托写法
document.addEventListener('click', function(e) {
  if (e.target.matches('.like-btn')) {
    e.target.classList.remove('like-btn');
    e.target.classList.add('unlike-btn');
  } else if (e.target.matches('.unlike-btn')) {
    e.target.classList.remove('unlike-btn');
    e.target.classList.add('like-btn');
  }
});

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