只有Javascript的最后一个事件侦听器可以工作

Javascript only last event listener works

本文关键字：工作 侦听器 事件 Javascript 最后一个 只有      更新时间：2023-09-26

我很难向您展示我的代码，因为它到处都是，但我要做的是：

我正在使用.innerHTML将html代码注入函数buy中的DOM中，我希望在这一步中注入的图标中添加一个点击事件，因为此时此刻我知道它的id。所以在注入它之后，我写：

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);
}

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

这把小提琴再现了你的问题。只有最后一个按钮具有单击处理程序

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

这个Fiddle使用DOM节点而不是原始HTML，并且所有按钮都有一个点击处理程序

修复示例：

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);
}

我不知道你做了类似的事情

//Place where you add elements.
var container = document.body;

创建元素并将侦听器添加到该元素（button）：

var button = '<button id="btn1x">Button 1</button>';
container.innerHTML += button;
//product.id = 'btn1';
document.getElementById(product.id+"x").addEventListener("click", removeItem);

然后以相同的方式添加新元素，并在生成下一个元素之前为其添加事件侦听器。

如果我的问题是对的，那么您的问题是替换container的整个内容，这样以前的事件侦听就会丢失。

CCD_ 11与CCD_。因此，您将覆盖html。

您应该从函数创建元素，而不是像现在这样从字符串创建元素。

var button = document.createElement('button');
button.id = product.id + 'x'; 
button.innerText = 'Button 1'; // Title of button.
//Add button to container.
container.appendChild(button);
//Add event listener to created button.
button.addEventListener('click', myFunc);

更新：

有一种方法可以将字符串解析为元素。

首先创建一个容器，其中将从字符串中设置内部html，然后从该临时容器中获取第一个元素（或更多元素，取决于您的html字符串），然后将它们添加到容器中，并添加到这些元素的侦听器中。

演示：http://jsfiddle.net/3cD4G/1/

HTML:

<div id="container">
</div>

Javascript：

var container = document.getElementById("container");
function clicky(){
    alert("clicked");   
}
var tempContainer = document.createElement('div');
for(var i=0; i<4; i++){
    //Create your element as string.
    var strElem = "<button type='button' id='btn_" + i + "'>Click</button>";
    //Add that string to temp container (his html will be replaced, not added).
    tempContainer.innerHTML = strElem.trim();//Trim function used to prevent empty textnodes before element.
    //Get element from temp container.
    var button = tempContainer.children[0];
    //Empty tempContainer for better security (But about which security I'm talking in JavaScript in string element generation :) )
    tempContainer.innerHTML = '';
    //Add your button to container.
    container.appendChild(button);
    //Add event listener to button:
    //document.getElementById("btn_" + i).onclick = clicky;
    //Better way to add event listener:
    button.addEventListener('click', clicky);
}

演示：http://jsfiddle.net/3cD4G/1/

相关文章：