Ajax与jQuery实现点赞按钮问题：动态刷新后取消点赞按钮事件失效

这个问题的核心原因是事件绑定的时机问题：你初始给#unlike和.like绑定点击事件的时候，这些元素是DOM加载完成时存在的，但当你通过load()方法刷新#likebutton{{ $article->id }}内部内容后，新生成的#unlike按钮是全新的DOM元素，并没有被绑定之前的点击事件，所以点击无效。

修复方案：使用jQuery事件委托 #

把你的点击事件绑定改成委托模式，绑定到一个不会被刷新的父元素（比如页面的静态容器，或者直接绑定到document），这样新生成的元素也能触发事件。

修改你的Ajax函数代码如下：

// 封装的like函数保持不变
function like(id = null) {
  return $.ajax("{{ route('likes') }}", {
    method: 'POST',
    data: { "_token": "{{ csrf_token() }}", "id" : id }
  });
}

// 用事件委托绑定取消点赞事件
$(document).on('click', '#unlike', function() {
  var id = $(this).data("id");
  let request = like(id);
  request.done(() => {
    $('#likebutton'+id+'').load(window.location.href + ' #content'+id+' > *');
  });
});

// 用事件委托绑定点赞事件
$(document).on('click', '.like', function() {
  var id = $(this).data("id");
  let request = like(id);
  request.done(() => {
    $('#likebutton'+id+'').load(window.location.href + ' #content'+id+' > *');
  });
});

为什么这样能解决问题？ #

事件委托利用了DOM的事件冒泡机制：当你点击新生成的.like或#unlike按钮时，事件会冒泡到document（或者你选择的父容器），而我们在document上绑定的事件监听器会捕捉到这个事件，然后检查触发事件的元素是否匹配选择器（.like或#unlike），如果匹配就执行对应的逻辑。这样不管元素是初始就存在的，还是后来动态生成的，只要匹配选择器就能触发事件。

额外优化建议 #

• 尽量不要绑定到document，而是绑定到离目标元素最近的、不会被刷新的父容器（比如你的#likebutton{{ $article->id }}的上层静态容器），这样事件冒泡的路径更短，性能更好。
• 注意你的Blade模板里，#unlike这个ID是循环生成的吗？如果多个文章的点赞按钮都用#unlike作为ID，会导致ID重复（HTML里ID必须唯一），这可能引发其他问题。建议直接用类选择器.unlike来绑定事件（你已经给取消点赞按钮加了这个类），同时去掉重复的ID：

修改按钮代码的ID部分：

<i type="button" 
   @if (in_array($article->id , App\User::find(Auth::user()->id)->like()->pluck('article_id')->toArray())) 
       class="unlike fas fa-heart ms-2 float-end" 
       style="font-size: 1.5rem; color: rgb(255, 34, 82);" 
   @else 
       class="like far fa-heart ms-2 float-end" 
       style="font-size: 1.5rem; color: aliceblue;" 
   @endif 
   data-id="{{ $article->id }}"
>
</i>

然后事件委托直接用类选择器：

$(document).on('click', '.unlike', function() {
  // ... 逻辑不变
});

这样就避免了ID重复的问题，代码更健壮。

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