如何为DOM中尚未存在的CMS过滤移除标签绑定点击事件？

需求 #

点击页面上已应用的“video”或“photo”过滤标签时，自动触发带有“view all”的元素点击，实现和重置按钮一致的效果。

界面截图 #

当前代码 #

// reset contenttype on video or photo genre
const appliedFilterTag = document.querySelectorAll('[fs-cmsfilter-element="tag-remove"]');

appliedFilterTag.forEach(element => {
  const innerText = element.innerText.toLowerCase();

  if (innerText === "video" || innerText === "photo") {
    element.addEventListener('click', () => {
      const allFilterElement = document.querySelector('#all-filter');
      allFilterElement.click();
    });
  }
});

遇到的问题 #

这段代码仅在过滤标签已存在于DOM中时能正常绑定事件，但这些标签是动态生成的（页面初始加载时不存在），直接绑定事件的方式完全失效。

解决方案：事件委托 #

针对动态生成的DOM元素，必须用事件委托处理。把事件绑定到始终存在的父容器（或document）上，通过事件冒泡捕获点击动作：

// 事件委托处理动态过滤标签的点击
document.addEventListener('click', (e) => {
  // 找到点击元素中符合过滤标签属性的父/自身元素
  const targetTag = e.target.closest('[fs-cmsfilter-element="tag-remove"]');
  if (!targetTag) return;

  const tagText = targetTag.innerText.toLowerCase();
  // 判断是否是目标标签
  if (tagText === 'video' || tagText === 'photo') {
    const allFilterBtn = document.querySelector('#all-filter');
    if (allFilterBtn) { // 确保按钮存在再执行点击
      allFilterBtn.click();
    }
  }
});

方案说明 #

1. 事件委托原理：利用DOM事件冒泡特性，点击动态生成的标签时，事件会传递到document，在此处捕获并处理
2. closest()方法：精准匹配包含目标属性的元素，即使点击的是标签内部的子节点也能生效
3. 动态适配：每次点击时才检查元素是否存在，无需提前获取DOM，完美适配标签动态生成的场景

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