I looked at this example how to add click event on dynamically generate element jquery
It seemed close to my problem but I could not resolve it.
I want to be able to make items with javascript and add a click event handler on every row I add.
I have made this little snippet to illustrate my issue.
My Issue: The event is only added on the last row.
Here is my code.
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>
Problem is where the element is added. it is actually recreating the elements that have already been created un-linking the click events that have been set prior.
document.getElementById(`divContainer`).innerHTML += newelement;
So to solve this do not recreate the html of the element, instead add the new element to the existing container(element)
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);
});
}
add your attribute values to class instead of id. and use "this" keyword
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.