动态生成post内容的JS点击事件仅首个生效，如何实现独立绑定？

AI 小北

2026-10-6

问题根因

你使用querySelector('.post')仅会匹配页面第一个符合条件的post元素，后续生成的帖子没有绑定点击事件
你尝试从.options子节点查找.editanddelete的逻辑错误，二者为同级节点，无法通过子元素查询获取
动态新增的帖子如果每次新增后不重新绑定事件，原生的直接绑定逻辑不会作用于新节点

解决方案

方案1：事件委托（推荐，适配动态新增帖子）

将点击事件绑定到所有post的共同父级节点（或直接绑定到document），通过事件冒泡匹配触发事件的目标元素，无需每次新增帖子后重复绑定事件：

document.addEventListener('click', function(e) {
  // 匹配被点击的.options元素（包含点击.options子元素的场景）
  const targetOptions = e.target.closest('.options');
  if (!targetOptions) return;
  // 找到当前options所属的post容器
  const currentPost = targetOptions.closest('.post');
  // 查询当前post下的editanddelete元素
  const currentEditArea = currentPost.querySelector('.editanddelete');
  // 切换显隐类
  currentEditArea.classList.toggle('none');
})

方案2：遍历绑定（适合无动态新增场景）

如果页面不会动态新增帖子，可以直接遍历所有.options元素绑定事件：

document.querySelectorAll('.options').forEach(function(optionsEl) {
  optionsEl.addEventListener('click', function() {
    const currentPost = optionsEl.closest('.post');
    const currentEditArea = currentPost.querySelector('.editanddelete');
    currentEditArea.classList.toggle('none');
  })
})