Javascript 在创建新元素后修复事件问题？

当我点击项目时，它会显示被点击的元素，但在创建新项目后，它对新项目不起作用

我知道第一个项目选择器let items=document.querySelectorAll.item'；，会发生这种情况；，它只在创建新项目后加载页面时保存元素，而不影响项目选择器。但我需要修复它。如果我创建新项目，它应该适用于所有旧项目和新项目

//为了一些东西。。 允许 items=document.querySelectorAll.item'； items.forEach elm=>{ elm.addEventListener'click'，=>{ console.log elm.innerText ; } }; //创建一个新的 允许 btn=document.querySelector'button'， app=document.querySelector'.app view'， dataId=0； btn.addEventListener'click'，=>{ dataId++； 允许 newItem=document.createElement'div'； newItem.className='item'； newItem.innerHTML=`我来自星球${dataId}`； app.insertAdjacentElement“beforeend”，newItem； }; .项目{ 填充：.25rem 1rem； 字体系列：Helvetica； 颜色：紫色； 用户选择：无； } .项目：悬停{ 游标：默认值； 边界：1×000； } .默认项{ 颜色：007bff； } 钮扣{ 位置：固定； 顶部：1rem； 右：1rem； 填充：.5rem1rem； } 默认项 创造新的

---

创建每个newItem时，需要将事件侦听器附加到该项

我已经把它移到了一个函数中，这样代码就可以重用了

//为了一些东西。。 让items=document.querySelectorAll.item'； items.forEachelm=>{ bindClickEventelm；//将事件附加到现有项 }; 函数bindClickEventelm{ elm.addEventListener'click'，=>{ console.log elm.innerText ; } } //创建一个新的 设btn=document.querySelector'button'， app=document.querySelector'.app view'， dataId=0； btn.addEventListener'click'，=>{ dataId++； 让newItem=document.createElement'div'； newItem.className='item'； newItem.innerHTML=`我来自星球${dataId}`； 应用程序.插入元素'beforeend'，新项目； bindClickEventnewItem；//将事件附加到新项目 }; .项目{ 填充：.25rem 1rem； 字体系列：Helvetica； 颜色：紫色； 用户选择：无； } .项目：悬停{ 游标：默认值； 边界：1×000； } .默认项{ 颜色：007bff； } 钮扣{ 位置：固定； 顶部：1rem； 右：1rem； 填充：.5rem1rem； } 默认项 创造新的

---

创建每个newItem时，需要将事件侦听器附加到该项

我已经把它移到了一个函数中，这样代码就可以重用了

//为了一些东西。。 让items=document.querySelectorAll.item'； items.forEachelm=>{ bindClickEventelm；//将事件附加到现有项 }; 函数bindClickEventelm{ elm.addEventListener'click'，=>{ console.log elm.innerText ; } } //创建一个新的 设btn=document.querySelector'button'， app=document.querySelector'.app view'， dataId=0； btn.addEventListener'click'，=>{ dataId++； 让newItem=document.createElement'div'； newItem.className='item'； newItem.innerHTML=`我来自星球${dataId}`； 应用程序.插入元素'beforeend'，新项目； bindClickEventnewItem；//将事件附加到新项目 }; .项目{ 填充：.25rem 1rem； 字体系列：Helvetica； 颜色：紫色； 用户选择：无； } .项目：悬停{ 游标：默认值； 边界：1×000； } .默认项{ 颜色：007bff； } 钮扣{ 位置：固定； 顶部：1rem； 右：1rem； 填充：.5rem1rem； } 默认项 创造新的

---

考虑使用事件委派：

const itemContainer=document.querySelector'.app view'； itemContainer.addEventListener“单击”，事件=>{ 如果event.target.classList.包含'item'{ //做事 } }; 请注意，这必须使用单击的元素，而不是侦听器附加到的元素

你可以在这篇博文中找到更多信息：

事件委派允许您避免向特定节点添加事件侦听器；而是将事件侦听器添加到一个父级。该事件侦听器分析冒泡事件以查找子元素上的匹配项

---

考虑使用事件委派：

const itemContainer=document.querySelector'.app view'； itemContainer.addEventListener“单击”，事件=>{ 如果event.target.classList.包含'item'{ //做事 } }; 请注意，这必须使用单击的元素，而不是侦听器附加到的元素

你可以在这篇博文中找到更多信息：

事件委派允许您避免向特定节点添加事件侦听器；而是将事件侦听器添加到一个父级。该事件侦听器分析冒泡事件以查找子元素上的匹配项

---

您忘了将eventListener添加到新添加的项目中。项目您忘了将eventListener添加到新添加的项目中。项目如果希望为新项目和旧项目使用单个事件侦听器，则更适合。第一个不太方便

---

作为你的回答。这更有用，我从中学到了很多，谢谢。如果你想要一个新的和旧的项目的单一事件监听器，会更合适。第一个不如你的答案方便。这是更有用的，我从中学到了很多，谢谢。但有时候，这是如此凝灰岩，以达到像这种情况下的目标元素@我不确定我是否理解这个例子，但是是的，这个方法确实需要目标元素有一个共同的祖先。但是这个祖先可以总是像document.querySelector'your-app-root'或者甚至是简单的document.body。但是有时候，像这样的情况下，要到达目标元素，这是非常困难的@我不确定我是否理解这个例子，但是是的，这个方法确实需要目标元素有一个共同的祖先。但这个祖先可以是document.queryselect或'your-app-root'，甚至是document.body。