為什么事件監聽器只添加到第一個元素？

Question

因此，單擊按鈕后，會出現這個循環，它會遍歷數組並創建一個包含每個數組元素數據的 div。 現在，在將 div 注入 DOM 之后，我向它們添加了一個事件偵聽器，但只有第一個添加的元素會響應。 :/ 其他人都死了。 有小費嗎？

 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

Document 方法 querySelector() 返回文檔中與指定選擇器或選擇器組匹配的第一個元素。 如果未找到匹配項，則返回 null。

由於document.querySelector(".listItem")僅選擇與指定選擇器匹配的第一個元素，因此事件偵聽器僅應用於第一個元素。

Document 方法 querySelectorAll() 返回一個 static（非實時）NodeList，表示與指定選擇器組匹配的文檔元素列表。

嘗試使用document.querySelectorAll(".listItem")並循環遍歷它以將事件偵聽器添加到所有元素。