EventListener不会通过单击div来触发

Question

我使用Javascript动态创建多个div

var cart = document.createElement("div");
cart.classList.add("buy-item");
cart.setAttribute("name", "buy-food"); 
div.appendChild(cart);

并且当我使用“ buy-item”类收集所有元素时，我将这些元素作为HTMLCollection获得，但是当我想知道何时单击它时，什么都没有发生

var elements = document.getElementsByClassName("buy-item");
console.log(elements)

function addFoodToCart() {
    console.log("One of buy-item class itemes was clicked")
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', addFoodToCart);
}

HTML元素看起来像这样

<div class="food-wrap dynamic-food">
 <img class="food-item-img" src="/img/foodItem.png">
 <p class="food-title">Csípős</p><p class="food-price">190</p>
 <div class="buy-item" name="buy-food"></div>
 <div class="tooltip">
  <span class="tooltiptext">Csípős szósz</span>
 </div>
</div>

Answer 1

[不确定这是否有帮助，这是否适合您的情况，但是对事件冒泡，事件委托和 目标元素 Javascript。

tl; dr：将事件侦听器添加到父div（包含您拥有/将要创建的所有其他元素的父侦听器，并使用event.target知道单击了哪个侦听器。）>

在下面的示例中，运行代码并单击每个段落。控制台日志将显示您喜欢的元素。

function findTheOneClicked(event) {
    console.log(event.target)
}

const mainDiv = document.getElementById("parent");
mainDiv.addEventListener('click', findTheOneClicked);
<div id="parent">
<p>"Test 1"</p>
<p>"Test 2"</p>
<p>"Test 3"</p>
</div>

这非常好，当您的元素上包含许多其他元素并且您想对它们执行某些操作时，或者要将事件处理程序添加到页面上不可用（尚未创建）的元素上时， 。

关于此主题的精彩阅读：https://javascript.info/bubbling-and-capturing