点击分类文本无法变色：动态新增分类无点击事件响应

问题现象 #

预渲染的分类名称点击后，文本会通过active类变为红色，但通过输入框和「添加按钮」新增的分类，点击后无任何反应，事件处理逻辑完全不生效。

原因分析 #

当前代码是在页面加载完成后，仅对当时已存在的.categories__text元素绑定点击事件。动态新增的DOM元素在事件绑定执行时还未创建，自然没有被绑定事件，所以点击时不会触发逻辑。

解决方案：使用事件委托 #

把点击事件绑定到分类列表的父容器（.categories__list）上，利用DOM事件冒泡机制，统一处理所有子元素的点击事件——包括后续动态新增的分类元素。

修改后的JavaScript代码：

// 给分类添加active类
const addActiveClass = (elem) => {
  elem.classList.add("active");
};
// 移除所有分类的active类
const removeActiveClass = (catArr) => {
  Array.from(catArr).forEach((elem) => {
    elem.classList.remove("active");
  });
};

// 事件委托：绑定到父容器上
document.querySelector(".categories__list").addEventListener("click", (e) => {
  // 判断点击的目标是否为分类文本元素
  if (e.target.matches(".categories__text")) {
    removeActiveClass(document.getElementsByClassName("categories__text"));
    addActiveClass(e.target);
  }
});

补充说明 #

新增分类的代码需要保证结构正确：新增的分类文本元素必须带有.categories__text类，并且挂载到.categories__list容器下。示例新增逻辑如下：

// 假设添加按钮的ID是add-category-btn，输入框ID是category-input
document.getElementById("add-category-btn").addEventListener("click", () => {
  const inputValue = document.getElementById("category-input").value.trim();
  if (!inputValue) return;

  // 创建新分类元素
  const item = document.createElement("li");
  item.className = "categories__item";
  
  const text = document.createElement("p");
  text.className = "categories__text";
  text.textContent = inputValue;
  
  item.appendChild(text);
  document.querySelector(".categories__list").appendChild(item);
});

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