Javascript - Addeventlistener On All Created Li Elements January 18, 2024 Post a Comment So I have a simple script that adds 'li' elements to the 'ul' and assigns them a class. Now I want to change the class of 'li' item on click event. Here is the HTML: Solution 1: Use event delegation for the dynamically created elements. With this, you only need one event listener on the ul#list and it will work for all elements you dynamically attach to it:document.getElementById("list").addEventListener("click",function(e) { if (e.target && e.target.matches("li.item")) { e.target.className = "foo"; // new class name here } }); CopyHere's a simplified example so you can see what happens with the code: functionaddItem(i) { var li = document.createElement('li'); li.appendChild(document.createTextNode(i)); li.className = 'item'; document.getElementById('list').appendChild(li); } var counter = 2; document.getElementById('btn').addEventListener('click', function() { addItem(counter++); }); document.getElementById("list").addEventListener("click", function(e) { if (e.target && e.target.matches("li.item")) { e.target.className = "foo"; // new class name herealert("clicked " + e.target.innerText); } });Copy<ulid="list"><liclass="item">1</li></ul><buttonid="btn"> add item </button>CopySolution 2: You'll have to set the eventListener on each single item, as document.getElementsByClassName() returns a collection of items and you can't simply add an event listener to all of them with one call of addEventListener().So, just like the loop you used in itemDone(), you'll have to iterate over all items and add the listener to them:var items = document.getElementsByClassName("item"); for (var i = 0; i < items.length; i++) { items[i].addEventListener("click", itemDone); } CopyAs pointed out in the comments, you can also do so directly when creating the elements, so in your addItem() function, add:Baca JugaShow And Hide Element On Mouse Over JqueryWhy Does Queryselector Only Select The First Element And How Can I Fix This?How To Get The Next Obj When Looping In The Django ModelnewListItem.addEventListener("click", itemDone); CopySolution 3: try this :var item = document.getElementsByClassName("item"); for (var i = 0; i < item.length; i++) { item[i].addEventListener("click", itemDone); } CopySolution 4: functionaddItem(i) { var li = document.createElement('li'); li.appendChild(document.createTextNode(i)); li.className = 'item'; document.getElementById('list').appendChild(li); } var counter = 2; document.getElementById('btn').addEventListener('click', function() { addItem(counter++); }); document.getElementById("list").addEventListener("click", function(e) { if (e.target && e.target.matches("li.item")) { e.target.className = "foo"; // new class name herealert("clicked " + e.target.innerText); } });Copy<ulid="list"><liclass="item">1</li><liclass="item">1</li><liclass="item">1</li><liclass="item">1</li><liclass="item">1</li></ul><buttonid="btn"> add item </button>CopySolution 5: First, try using getElementByTagName instead of querySelectorAll, because querySelectorAll is slower. And second, item receives an array, so item.addEventListener will give you an error. You have to do the addEventListener over item[counter], in a loop. Share You may like these postsDjango Admin - Display Image On HoverValues Of Fabric.js Canvas Coordinates Change When Canvas Is RepositionedD3js Force Directed - On Hover To Node, Highlight/colourup Linked Nodes And Links?How Can I Ensure A Bootstrap Column Expands To Fit The Width Of Its Content When This Value Is Changed? Post a Comment for "Javascript - Addeventlistener On All Created Li Elements"
Post a Comment for "Javascript - Addeventlistener On All Created Li Elements"