Javascript 向动态添加的列表元素添加事件侦听器

我对JavaScript编程非常陌生，我正在尝试学习JavaScript中的事件处理程序。我在动态创建的元素上添加事件处理程序。我制作了一个简单的购物清单代码，通过它我可以将数据输入到清单中，我在每个项目的右侧添加了一个删除图标。我在该图标上添加了事件处理程序，但它仅适用于清单中已经存在的项目，而不适用于动态添加的项目

我花了大约一天的时间试图找到方法，但仍然无法找到用纯JavaScript实现这一目标的正确方法。我已经阅读了几乎所有关于堆栈溢出的答案和许多其他资源，但仍然无法获得解决方案，我在找到解决方案时，借助了其中一个关于堆栈溢出的答案，这是纯JavaScript

问题链接：

这个问题和我的问题很相似，但我按照答案所说的做了尝试，但仍然不适合我

document.querySelector("ul").addEventListener('click', function(event) {
    if (event.target.tagName === "I") {
        alert("hmm.. you clicked.");
    }
});

小提琴链接：

var input=document.getElementById（“userinput”）；
var enter=document.getElementById（“enter”）；
var ul=文件查询选择器（“ul”）；
var listItem=document.queryselectoral（“li”）；
功能切换功能（e）{
如果（e.target.tagName==“LI”）{
e、 target.classList.toggle（“完成”）；
}
}
函数addListItemOnClick（）{
如果（input.value.length>0）{
console.log（input.value.length）；
var li=document.createElement（“li”）；
appendChild（document.createTextNode（input.value））；
ul.儿童（li）；
input.value=“”；
var d=document.createElement（“div”）；
d、 类列表。添加（“fas”、“fa垃圾”）；
li.儿童（d）；
}
}
函数addListItemOnPress（）{
if（input.value.length>0&&event.keyCode==13）{
var li=document.createElement（“li”）；
appendChild（document.createTextNode（input.value））；
ul.儿童（li）；
input.value=“”；
var d=document.createElement（“div”）；
d、 类列表。添加（“fas”、“fa垃圾”）；
li.儿童（d）；
}
}
输入.addEventListener（“单击”，addListItemOnClick）；
input.addEventListener（“按键”，addListItemOnPress）；
ul.addEventListener（“点击”，切换功能）；
document.querySelector（“ul”）.addEventListener（“单击”），函数（事件）{
如果（event.target.tagName==“I”）{
警报（“嗯……你点击了。”）；
}
});
.box{
文本对齐：居中；
边框：2件纯黑；
}
h1{
字体系列：富兰克林哥特式中字体、Arial窄字体、Arial无衬线字体；
字体大小：50px；
}
#首先{
字体大小：25px；
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
文字装饰：下划线；
}
保险商实验室{
边框：1px纯黑；
填充：0；
}
李{
显示：块；
列表样式：无；
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
字体大小：15px；
文本对齐：居中；
文字装饰：下划线；
}
#用户输入{
文本对齐：居中；
}
.完成{
文字装饰：线条贯通；
}
垃圾{
浮动：对；
}

Javascript+DOM
购物清单
今天就完成
进入

记事本
果冻
菠菜
米饭
生日蛋糕
蜡烛

添加的项目是
div
标记元素。但原始项是
i
标记元素。
event.target.tagName==“I”
测试将只匹配
I
标记，而不匹配
div
标记

更新添加的项目代码（在
addListItemOnClick
和
addListItemOnPress
中）：

将是：

document.createElement("i")

如果您分离数据、查看并使用html内联绑定（适用于小型项目，类似于angular/react/vue框架中的模板…），代码将变得更小、更干净


let数据=[
{name:“笔记本”}，
{名称：“果冻”}，
{名称：“菠菜”}，
{名称：“大米”}，
{姓名：“生日”}，
{名称：“蜡烛”}，
];
函数add（）{
data.push（{name:userinput.value}）；
userinput.value=''；
刷新（）；
}
函数del（i）{
数据拼接（i，1）；
刷新（）；
}
函数刷新（）{
items.innerHTML=data.map（（x，i）=>`
${x.name}
`).加入（“”）；
}
刷新（）

购物清单
今天就完成
进入

我建议您在问题中添加addListItemOnPress函数的代码。链接到fiddle是一个很好的开始，尽管通过添加函数实现，它并不完全符合“完整”问题的定义，但是任何人都可以重现您描述的确切问题。啊，以及回答评论中提到的addListItemOnClick。啊，您有两个函数addListItemOnClick和addListItemOnPress。当我将两者从
div
更改为
I
时，它对我有效。@Will Cain，然后我应该将event.target.tagName==“I”更改为event.target.tagName.toLowerCase（）==“I”；alsoUppercase
event.target.tagName==“I”
对我有效。看看上面我的小提琴。
document.createElement("i")