使用jQuery动态渲染内容后点赞按钮点击无响应问题咨询

核心问题1：动态元素事件绑定失效 #

初始执行$(".fixButtonsCounter").on("click", () => {})绑定时，点赞按钮还没有被渲染到页面中（只有点击.batata4后才会动态生成这些元素），jQuery默认只能给页面加载阶段已经存在的DOM元素绑定事件，后续动态插入的元素不会自动继承这个绑定规则。

核心问题2：代码存在语法&逻辑错误 #

• jQuery的html()方法为读写一体方法，赋值时需要把内容作为参数传入，不能写$(".icon55").html() = xxx格式，正确写法为$(".icon55").html(xxx)
• 全局定义的thumbsUp变量只能记录一个点赞状态，多个视频的点赞按钮会共用这个状态，逻辑不符合预期
• 代码中count变量未定义，且text()获取到的内容是字符串格式，不能直接执行自增操作，需要先转换为数字
• 全局选择$(".icon55")、$(".count55")会选中页面中所有对应类名的元素，点击一个按钮会修改所有按钮的点赞状态，不符合业务需求

修复后的代码 #

将原来的点赞按钮绑定代码替换为以下内容即可：

// 使用事件委托，把事件绑定在始终存在的父元素.video-section上
$(".video-section").on("click", ".fixButtonsCounter", function () {
  // 仅查找当前点击按钮内的icon和计数元素
  const $icon = $(this).find(".icon55");
  const $count = $(this).find(".count55");
  // 给每个按钮单独存储点赞状态，避免全局变量冲突
  let isThumbsUp = $(this).data("thumbsUp") || false;

  if (!isThumbsUp) {
    $(this).data("thumbsUp", true);
    $icon.html(`<i class="fas fa-thumbs-up"></i>`);
    $count.text(Number($count.text()) + 1);
  } else {
    $(this).data("thumbsUp", false);
    $icon.html(`<i class="far fa-thumbs-up"></i>`);
    $count.text(Number($count.text()) - 1);
  }
});

补充说明 #

事件委托的原理是把点击事件绑定在已经存在的父元素上，点击子元素时事件会向上冒泡到父元素，再通过选择器匹配触发对应逻辑，不管子元素是初始存在还是后续动态生成都可以正常触发事件。使用jQuery的data()方法给每个按钮单独存储状态，也可以避免多个按钮之间的状态干扰。

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