如何移除循环生成卡片中单个点赞/点踩按钮的点击事件？

问题分析 #

当前代码存在两个核心问题：

• 内联onclick绑定方式不利于动态元素的事件管理，且函数内通过全局类选择器.fa-thumbs-up/.fa-thumbs-down绑定事件，会给所有同类型图标重复绑定事件，影响所有卡片。
• 没有针对当前点击的按钮做事件移除操作，导致可以重复点击。

修正后的实现 #

1. 调整HTML结构 #

去掉内联onclick，给按钮添加标识属性（data-contentid和data-islike），方便后续获取参数：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- 示例卡片，循环生成时替换contentid即可 -->
<div class="col-lg-6 d-flex justify-content-lg-end">
  <a href="javascript:void(0)"
     class="text-navy-custom font-r fs-small me-3 d-flex like-btn"
     data-contentid="21785"
     data-islike="true"
  >
    <i class="far align-self-center fa-thumbs-up me-2 align-self-center"
       aria-hidden="true">
    </i>
    <p id="p-like-21785"
       class="mb-0 align-self-center d-none"
       tabindex="0">
      0
    </p>
  </a>
  <a href="javascript:void(0)"
     class="text-navy-custom font-r fs-small me-3 d-flex dislike-btn"
     data-contentid="21786"
     data-islike="false"
  >
    <i class="far align-self-center fa-thumbs-down me-2 align-self-center"
       aria-hidden="true">
    </i>
    <p id="p-dislike-21786"
       class="mb-0 align-self-center d-none"
       tabindex="0">
      0
    </p>
  </a>
</div>

2. 重构JavaScript逻辑 #

用事件委托绑定事件，针对当前点击的按钮完成计数更新、样式修改后，移除该按钮的点击事件：

// 事件委托监听所有点赞/点踩按钮的点击
$(document).on('click', '.like-btn, .dislike-btn', function() {
  var $currentBtn = $(this);
  var contentId = $currentBtn.data('contentid');
  var isLike = $currentBtn.data('islike');

  if (isLike) {
    // 更新点赞计数
    var $countEl = $('#p-like-' + contentId);
    $countEl.text(parseInt($countEl.text()) + 1);
    // 修改点赞图标样式
    $currentBtn.find('.fa-thumbs-up').removeClass('far').addClass('fa');
  } else {
    // 更新点踩计数
    var $countEl = $('#p-dislike-' + contentId);
    $countEl.text(parseInt($countEl.text()) + 1);
    // 修改点踩图标样式
    $currentBtn.find('.fa-thumbs-down').removeClass('far').addClass('fa');
  }

  // 移除当前按钮的点击事件，避免重复操作
  $currentBtn.off('click');
});

关键说明 #

• 事件委托：通过$(document).on()绑定事件，适配动态生成的卡片元素，无需给每个元素单独绑定事件。
• 精准操作：用$(this)定位当前点击的按钮，再通过find()找到对应图标和计数元素，完全不影响其他卡片的按钮。
• 事件移除：$currentBtn.off('click')只移除当前按钮的点击事件，确保该按钮只能被点击一次。

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