Javascript 在动态html元素上添加单击事件

我看了这个例子

这似乎接近我的问题，但我无法解决它

我希望能够使用javascript创建项目，并在我添加的每一行上添加一个单击事件处理程序。
我用这个小片段来说明我的问题

我的问题：事件仅添加到最后一行

这是我的密码

let items=[{name:“John”}，{name:“Bob”}，{name:“Joe”}]；
让templatehtml=`
{name}
看法


`;
items.forEach（（项目，索引）=>{
item.index=索引；
AddUIitem（item，templatehtml）；
});   
函数AddUIitem（项，项模板）
{
itemTemplate=itemTemplate.replace（/{id}/g，item.index）；
itemTemplate=itemTemplate.replace（/{name}/g，item.name）；
document.getElementById（`divContainer`）。innerHTML+=`${itemTemplate}`；
document.getElementById（`btnView${item.index}`）.addEventListener（'click'，（）=>{
警报（'Cliked'+项目索引）；
});
}

---

将属性值添加到类而不是id。并使用“this”关键字

问题在于添加元素的位置。它实际上是在重新创建具有 已创建取消链接之前设置的单击事件

document.getElementById(`divContainer`).innerHTML += newelement;

因此，要解决这个问题，请不要重新创建元素的html，而是将新元素添加到现有容器（元素）中

function AddUIitem(item,itemTemplate)
{

    itemTemplate = itemTemplate.replace(/{id}/g, item.index);
    itemTemplate = itemTemplate.replace(/{name}/g, item.name);

    let card = document.createElement("div");
    card.innerHTML = itemTemplate;

    document.getElementById(`divContainer`).appendChild(card);

    document.getElementById(`btnView${item.index}`).addEventListener('click',()=>{
        alert('Clicked ' + item.index);
    });
}