我很难向你展示我的代码,因为它到处都是,但我想做的是:
我在使用 .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">£'+product.price+'</h1><i id="'+product.id+'x" class="fa fa-times"></i></article>';
document.getElementById(product.id+"x").addEventListener("click", removeItem, true);
}
最佳答案
因此,您通过覆盖 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);
}
关于Javascript 只有最后一个事件监听器有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23013448/