Javascript 只有最后一个事件监听器有效

Question

我很难向你展示我的代码，因为它到处都是，但我想做的是:

我在使用 .innerHTML 的函数购买中将 html 代码注入(inject) DOM ，我希望向在此步骤中注入(inject)的图标添加点击事件，因为此时我知道它的 ID。所以在我注入(inject)它之后，我写:
document.getElementById(product.id+"x").addEventListener("click", removeItem);product.id是在上面创建的，这个元素是一个“X”按钮，当点击它时将从屏幕上删除。

问题是，这段代码运行了很多次，因为屏幕上要显示的项目很多。完成后，当按下“X”按钮时，只有最后一个甚至会触发。

有什么建议么？

编辑:

我无法在这个项目中使用 jquery。

这是我的代码:

function createHTML(targetID, product) {
    var target = document.getElementById(targetID);
    total = (parseFloat(total) + parseFloat(product.price)).toFixed(2);;
    target.innerHTML += '<article class="item" id="'+product.id+'"><img class="item_img" src="../'+product.image+'" width=100 height=100><h1 class="item_name">'+product.name+'</h1><p class="item_description">'+product.desc+'</p><h1 class="item_quantity">Quantity: '+product.quantity+'</h1><h1 class="item_price">&pound;'+product.price+'</h1><i id="'+product.id+'x" class="fa fa-times"></i></article>';

    document.getElementById(product.id+"x").addEventListener("click", removeItem, true);
}

Answer 1

因此，您通过覆盖 innerHTML 将新元素添加到容器中。或使用 += 附加到它.这是你的问题。当您覆盖 innerHTML或附加到它，您正在销毁并重新创建其中的所有元素，这会导致它们丢失任何绑定(bind)的事件处理程序(即您的点击处理程序)。

This fiddle reproduces your problem. Only the last button has a click handler.

解决方案是使用 document.createElement() 构建 DOM 元素。并使用 appendChild()或类似的附加它们，而不是创建/附加原始 HTML。这样，您以前的元素事件处理程序将保持不变。

This Fiddle uses DOM nodes instead of raw HTML and all buttons have a click handler.

示例修复:

var container = document.getElementById("container");
var elem;

function clicky(){
    alert("clicked");   
}

for(var i=0; i<4; i++){
    elem = document.createElement('button');
    elem.id = "btn_" + i;
    elem.appendChild(document.createTextNode('Click'));
    elem.addEventListener("click", clicky);
    container.appendChild(elem);
}