Javascript 如何仅在加载元素后触发事件？

我正在创建一个简单的标签系统

我还添加了删除阵列的功能。然而，我遇到了一个问题。每当启动事件侦听器删除该项时，都会出现以下错误：

uncaughttypeerror:cannotsetproperty'onclick'of undefined

我知道我遇到了这个错误，因为元素在DOM中不可见/不创建。由于标记仅在单击按钮后出现，因此如何仅在加载tags元素后启动事件

代码如下：

const tagsInput=document.getElementById（'tagsField'）；
const tagsBtn=document.getElementById（'getTags'）；
const ul=document.getElementById（'ul'）；
让tagsRemover=document.getElementsByCassName（'removeTag'）；
让tagsElemnts=document.getElementsByClassName（'tags'）；
设tagsContainer=[]；
让getTags=（）=>{
if（标记输入值）{
tagsInput.classList.remove（'hasError'）；
让tags=tagsInput.value.split（“，”）；
让pure_tags=tags.map（（x）=>x.trim（））；
tagsContainer=[…纯标签]；
}否则{
tagsInput.classList.add（'hasError'）；
}
}
让showTags=（）=>{
如果（tagsContainer.length>0）{
tagsContainer.forEach（（元素）=>{
让容器=document.createElement（'LI'）；
container.innerHTML='✖；'+元素；
container.className='tags'；
ul.附属物（容器）；
});
tagsContainer=[]；
tagsInput.value=''；
}
}
tagsInput.addEventListener（'input'，getTags）；
tagsBtn.addEventListener（“单击”，显示标签）；
//我做I<2只是为了调试
for（设i=0；i<2；i=i+1）{
tagsRemover[i].onclick=（）=>{
tagsElemnts[i].style.display='none'；
}
}

标签{
字体大小：24px；
字体系列：Roboto；
}
输入[类型=按钮]{
字号：18px；
边界：无；
颜色：#fff；
填充：0.6em 1.5em；
边界半径：2米；
背景:#ff4040；
光标：指针；
大纲：无；
左边距：0.5em；
}
输入[类型=文本]{
字号：1.4em；
填充：0.4em 0.7em；
大纲：无；
边框：2个实心#C2C2；
过渡：所有150毫秒的缓进缓出；
}
输入[类型=文本]：焦点{
边框颜色：#0095ff；
}
.标签{
列表样式：无；
背景#03A9F4；
颜色：#fff；
字体系列：Roboto，无衬线；
填充物：0.5em 1em；
边界半径：10em；
文本对齐：居中；
显示：内联；
字体大小：14px；
左边距：0.5em；
}
removeTag先生{
颜色：#fff；
显示：内联；
光标：指针；
}
哈斯洛尔先生{
边框颜色：#ff0023！重要；
}

获取标签
标签：

在

标记移动器[i]

处添加检查，错误将消失

当前代码：

tagsRemover[i].onclick = () => {
  tagsElemnts[i].style.display = 'none';
}

改为：

  if (tagsRemover[i]) {
    tagsRemover[i].onclick = () => {
      tagsElemnts[i].style.display = 'none';
    }
  }

下面是工作代码段：

const tagsInput=document.getElementById（'tagsField'）；
const tagsBtn=document.getElementById（'getTags'）；
const ul=document.getElementById（'ul'）；
让tagsRemover=document.getElementsByCassName（'removeTag'）；
让tagsElemnts=document.getElementsByClassName（'tags'）；
设tagsContainer=[]；
让getTags=（）=>{
if（标记输入值）{
tagsInput.classList.remove（'hasError'）；
让tags=tagsInput.value.split（“，”）；
让pure_tags=tags.map（（x）=>x.trim（））；
tagsContainer=[…纯标签]；
}否则{
tagsInput.classList.add（'hasError'）；
}
}
让showTags=（）=>{
如果（tagsContainer.length>0）{
tagsContainer.forEach（（元素）=>{
让容器=document.createElement（'LI'）；
container.innerHTML='✖；'+元素；
container.className='tags'；
ul.附属物（容器）；
});
tagsContainer=[]；
tagsInput.value=''；
}
}
tagsInput.addEventListener（'input'，getTags）；
tagsBtn.addEventListener（“单击”，显示标签）；
//我做I<2只是为了调试
for（设i=0；i<2；i=i+1）{
if（标记移动器[i]）{
tagsRemover[i].onclick=（）=>{
tagsElemnts[i].style.display='none'；
}
}
}

标签{
字体大小：24px；
字体系列：Roboto；
}
输入[类型=按钮]{
字号：18px；
边界：无；
颜色：#fff；
填充：0.6em 1.5em；
边界半径：2米；
背景:#ff4040；
光标：指针；
大纲：无；
左边距：0.5em；
}
输入[类型=文本]{
字号：1.4em；
填充：0.4em 0.7em；
大纲：无；
边框：2个实心#C2C2；
过渡：所有150毫秒的缓进缓出；
}
输入[类型=文本]：焦点{
边框颜色：#0095ff；
}
.标签{
列表样式：无；
背景#03A9F4；
颜色：#fff；
字体系列：Roboto，无衬线；
填充物：0.5em 1em；
边界半径：10em；
文本对齐：居中；
显示：内联；
字体大小：14px；
左边距：0.5em；
}
removeTag先生{
颜色：#fff；
显示：内联；
光标：指针；
}
哈斯洛尔先生{
边框颜色：#ff0023！重要；
}

获取标签
标签：

因此，我想setInterval只是最后一个希望，因为我需要不断检查元素是否存在于DOM中！你还有别的想法吗？