如何为JavaScript动态添加的内容绑定点击事件？

问题原因 #

你当前的点赞事件绑定逻辑是在页面加载时，通过document.querySelectorAll选中已存在的.btn-comment-like和.btn-comment-dislike按钮并绑定点击事件。但通过innerHTML动态添加的新评论按钮，在页面加载时并不存在，所以不会被绑定事件，必须刷新页面才能让新元素被选中并绑定。

最优解决方案：事件委托 #

事件委托利用事件冒泡机制，将事件绑定到已存在的父元素上，通过判断点击目标是否为目标按钮来执行逻辑。这种方式无需在添加新元素后重新绑定事件，性能更优。

步骤1：修改点赞事件绑定代码 #

替换原来的点赞事件绑定代码为以下事件委托逻辑：

// 将事件绑定到评论列表的父容器（比如.nested-comments，可根据实际DOM结构调整）
document.querySelector('.nested-comments').addEventListener('click', function(e) {
  // 找到点击的目标按钮（支持点击按钮内的图标时也能触发）
  const targetBtn = e.target.closest('.btn-comment-like, .btn-comment-dislike');
  if (!targetBtn) return; // 不是目标按钮则直接返回

  e.preventDefault();
  const commentRatingId = targetBtn.getAttribute('data-id');
  const commentRatingAction = targetBtn.getAttribute('data-action');
  const commentTotalRating = document.querySelector(`button[data-comment-rating='${commentRatingId}']`);
  
  // 检查是否存在消息提示容器，不存在则创建并插入
  let commentMessageRating = document.querySelector(`div[data-comment-message='${commentRatingId}']`);
  if (!commentMessageRating) {
    commentMessageRating = document.createElement('div');
    commentMessageRating.setAttribute('data-comment-message', commentRatingId);
    // 将容器插入到评论内容下方
    const cardText = targetBtn.closest('.col-md-10').querySelector('.card-text');
    cardText.insertAdjacentElement('afterend', commentMessageRating);
  }

  // 后续的fetch逻辑保持不变
  fetch(`/api/comments/${commentRatingId}/${commentRatingAction}/`, {
    method: 'POST',
    headers: {
      "X-CSRFToken": csrftoken,
      "X-Requested-With": "XMLHttpRequest",
    },
  }).then((response) => response.json()).then((result) => {
    if (result['error']) {
      commentMessageRating.innerHTML = `
              <div class="alert alert-danger rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                  <i class="fa-solid fa-hexagon-exclamation"></i> ${result['error']}!
              </div>`;
    } else {
      let alertHtml = '';
      if (commentRatingAction === 'like') {
        alertHtml = `
              <div class="alert alert-success rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                  <i class="fa-solid fa-face-smile"></i> Спасибо за оценку, ${result['author']}!
               </div>`;
      } else {
        alertHtml = `
              <div class="alert alert-danger rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                 <i class="fa-solid fa-face-frown"></i> Спасибо за критику, ${result['author']}!
               </div>`;
      }
      commentMessageRating.innerHTML = alertHtml;
      commentTotalRating.innerHTML = `${result['comment_total_rating']} <i class="fa-solid fa-hand-holding-heart"></i>`;
    }
  });
});

步骤2：完善动态评论的DOM结构 #

你当前的动态评论代码中缺少data-comment-message的容器，导致点赞后无法找到提示消息的位置。需要在添加评论时，在.card-text下方插入该容器：

父评论部分修改：

<div class="card-text mb-2">
  ${result['comment_content']}
</div>
<!-- 添加消息提示容器 -->
<div data-comment-message="${result['comment_id']}"></div>
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-outline-secondary nth-btn-sm btn-comment-like shadow-none" data-id="${result['comment_id']}" data-action="like" type="button">+1 <i class="fa-solid fa-heart-circle-plus"></i></button>
  <button class="btn btn-outline-secondary nth-btn-sm btn-comment-dislike shadow-none" data-id="${result['comment_id']}" data-action="dislike" type="button">-1 <i class="fa-solid fa-heart-circle-minus"></i></button>
  <button class="btn btn-outline-secondary nth-btn-sm shadow-none" type="button" data-comment-rating="${result['comment_id']}">${result['comment_total_rating']} <i class="fa-solid fa-hand-holding-heart"></i></button>
</div>

子评论部分修改：

同样在子评论的.card-text下方插入消息容器：

<div class="card-text mb-2">
  ${result['comment_content']}
</div>
<!-- 添加消息提示容器 -->
<div data-comment-message="${result['comment_id']}"></div>
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-outline-secondary nth-btn-sm btn-like shadow-none" data-id="${result['comment_id']}" data-action="like" type="button">+1 <i class="fa-solid fa-heart-circle-plus"></i></button>
  <button class="btn btn-outline-secondary nth-btn-sm btn-dislike shadow-none" data-id="${result['comment_id']}" data-action="dislike" type="button">-1 <i class="fa-solid fa-heart-circle-minus"></i></button>
  <button class="btn btn-outline-secondary nth-btn-sm shadow-none" type="button" data-comment-rating="${result['comment_id']}">${result['comment_total_rating']} <i class="fa-solid fa-hand-holding-heart"></i></button>
</div>

备选方案：添加元素后重新绑定事件 #

如果不想用事件委托，也可以将点赞事件逻辑封装成函数，在页面加载和添加新评论后分别调用：

步骤1：封装事件绑定函数 #

// 点击处理函数
function handleCommentRatingClick(e) {
  e.preventDefault();
  const commentRatingButtons = this;
  const commentRatingId = commentRatingButtons.getAttribute('data-id');
  const commentRatingAction = commentRatingButtons.getAttribute('data-action');
  const commentTotalRating = document.querySelector(`button[data-comment-rating='${commentRatingId}']`);
  const commentMessageRating = document.querySelector(`div[data-comment-message='${commentRatingId}']`);

  fetch(`/api/comments/${commentRatingId}/${commentRatingAction}/`, {
    method: 'POST',
    headers: {
      "X-CSRFToken": csrftoken,
      "X-Requested-With": "XMLHttpRequest",
    },
  }).then((response) => response.json()).then((result) => {
    if (result['error']) {
      commentMessageRating.innerHTML = `
              <div class="alert alert-danger rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                  <i class="fa-solid fa-hexagon-exclamation"></i> ${result['error']}!
              </div>`;
    } else {
      let alertHtml = '';
      if (commentRatingAction === 'like') {
        alertHtml = `
              <div class="alert alert-success rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                  <i class="fa-solid fa-face-smile"></i> Спасибо за оценку, ${result['author']}!
               </div>`;
      } else {
        alertHtml = `
              <div class="alert alert-danger rounded-0 shadow-sm me-2 align-self-start mb-2" role="alert" style="padding:2px;">
                 <i class="fa-solid fa-face-frown"></i> Спасибо за критику, ${result['author']}!
               </div>`;
      }
      commentMessageRating.innerHTML = alertHtml;
      commentTotalRating.innerHTML = `${result['comment_total_rating']} <i class="fa-solid fa-hand-holding-heart"></i>`;
    }
  });
}

// 绑定事件的函数
function bindCommentRatingEvents() {
  // 先移除旧事件避免重复绑定
  document.querySelectorAll('.btn-comment-like, .btn-comment-dislike').forEach(btn => {
    btn.removeEventListener('click', handleCommentRatingClick);
    btn.addEventListener('click', handleCommentRatingClick);
  });
}

// 页面加载时绑定事件
document.addEventListener('DOMContentLoaded', bindCommentRatingEvents);

步骤2：提交评论后重新绑定 #

在提交评论的then回调末尾调用bindCommentRatingEvents()：

commentForm.addEventListener('submit', function(e) {
  e.preventDefault();
  // ...原有代码...
  .then((result) => {
    // ...原有添加评论的代码...
    // 重新绑定事件
    bindCommentRatingEvents();
    // ...原有重置表单的代码...
  });
});

注意：此方案每次添加评论都要遍历所有按钮重新绑定，性能不如事件委托，仅适合简单场景。

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