为什么事件监听器只添加到第一个元素？

Question

So, after a button is clicked, there is this loop which goes through the array and creates a div containing data from each array element. Now, after the divs are injected into DOM, I add an event listener to them, but only the firstly added element responds. :/ The others are dead. Any tips?

 btnLeft.addEventListener("click", function(){ let output = ""; for(let x of array){ output += `<div class="listItem" data-id="${x.id}"> <ul> <li>Name: ${x.name}</li> <li>Price: ${x.price}</li> </ul> </div>`; } leftList.innerHTML = output; document.querySelector(".listItem").addEventListener("click", function(){ console.log(this.getAttribute("data-id")); }); });

Answer 1

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Since, document.querySelector(".listItem") is only selecting the first element that matches the specified selector, the event listener is applied only to the first element.

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

Try using document.querySelectorAll(".listItem") and loop through this to add event listeners to all the elements.