时间戳

首页 > 解决方案 > 在动态 html 元素上添加点击事件

javascript - 在动态 html 元素上添加点击事件

问题描述

我看了this example how to add click event on dynamic generate element jquery

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

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

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

这是我的代码。

let items = [{name : "John"},{name : "Bob"},{name : "Joe"}];
let templatehtml = ` 
<label id="lblnumber{id}">{name}</label>
<button id="btnView{id}" type="button" class="btn btn-primary">View</button> 
<br>
`;
   
items.forEach((item,index) => {
    item.index = index;
    AddUIitem(item,templatehtml);
});   

function AddUIitem(item,itemTemplate)
{
    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',()=>{
        alert('Cliked ' + item.index);
    });
}
<div id="divContainer"></div>

  function AddUIitem(item,itemTemplate)
  {
      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',()=>{
          alert('Clicked ' + item.index);
      });
  } 
</script>

标签： javascripthtml

解决方案

问题是添加元素的位置。它实际上是重新创建已经创建的元素，取消链接之前设置的点击事件。

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);
    });
}

推荐阅读