动态添加元素后，发现元素绑定的事件不生效

问题描述

提示：这里描述项目中遇到的问题：
动态添加元素后，发现为listitem[index]元素绑定的事件不生效

 top2()
    function top2(){
    let str=''
    getAjaxRequst("uSelectCatalogid",null,function(res){
        res.data.map((item,index)=>{
          str+=   `
          <li class="topfont" id="textscorll"  >${item.author}</li>
        `
        })
        document.querySelector(".group_31").innerHTML = str;
     })}
    //激活切换
    var listitem=document.querySelectorAll(".group_31 > li");
    listitem.forEach((i,index)=>{
        listitem[index].addEventListener("click",function(e){
          listitem.forEach(item=>{
            item.classList.remove("active")
          })
          e.srcElement.classList.add("active")
        },false)
    })

---

原因分析：

当使用JavaScript动态向HTML中添加元素时，如果在添加元素之前绑定了事件监听器，这些监听器可能对新添加的元素不起作用。这是因为事件监听器是在页面加载时绑定的，而不会自动适应后来添加的元素。

解决这个问题的方法之一是使用事件委托（Event Delegation）。事件委托是将事件监听器绑定到父元素上，然后通过事件冒泡原理在父元素上捕获子元素的事件。这样就可以处理动态添加的元素。

---

解决步骤：

动态添加元素： 使用JavaScript的DOM操作或类库（如jQuery）向HTML中添加元素。

document.querySelector(".group_31").innerHTML = str;

事件委托： 将事件监听器绑定到静态的父元素（或更高层次的祖先），然后通过事件对象的属性判断触发事件的元素。target

document.querySelector(".group_31").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    // 处理事件逻辑
  }
});

元素选择器和querySelector：使用CSS选择器语法来选择元素，document.querySelector方法返回匹配选择器的第一个元素。

document.querySelector(".group_31 li");

forEach 方法： 遍历数组或类数组对象的每个元素，对每个元素执行提供的函数。

document.querySelectorAll(".group_31 li").forEach(item => {
  item.classList.remove("active");
});

完整代码

top2();

function top2() {
  let str = '';
  getAjaxRequst("uSelectCatalogid", null, function (res) {
    res.data.map((item, index) => {
      str += `<li id="textscorll">${item.author}</li>`;
    });
    document.querySelector(".group_31").innerHTML = str;
  });
}

//  将事件监听器绑定到静态的父元素（或更高层次的祖先），然后通过事件对象的属性判断触发事件的元素
document.querySelector(".group_31").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    document.querySelectorAll(".group_31 li").forEach(item => {
      item.classList.remove("active");
    });
    e.target.classList.add("active");
  }
});