[英]Add click event on dynamic html elements
我看了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>
問題是添加元素的位置。 它實際上是重新創建已經創建的元素,取消鏈接之前設置的點擊事件。
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);
});
}
將您的屬性值添加到 class 而不是 id。 並使用“this”關鍵字
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.