JavaScript Click-Event 触发器每次点击触发多次

Question

我看过类似的帖子，但似乎找不到解决方案。

所以我面临的问题是我动态添加带有内容的div。如果您单击该生成的内容，就会发生某事。问题是 clicklick 事件会触发多次。有趣的是，它实际上从只有 1 个触发器开始，每次点击上升到 2、4、6、10、20、40 等触发器。

function AddArticle() {

    let single_article = document.createElement("div");
    single_article.setAttribute("class", "each-article");

    single_article = `<div> ANY ARTICEL </div>`;

    let prices_summary = document.getElementById('prices-summary');
    prices_summary.appendChild(single_article);

    //Refresh the Event since we added on DIV to the NodeList
    RefreshClickEvent();
}

function RefreshClickEvent() {

    let each_article = document.querySelectorAll(".each-article");

        for (let article of each_article ) {
            
            article.addEventListener('click', () => {

                console.log("Trigger.");
                
            });
        }
    }

Console Log OutPut: 
Trigger.
[2]Trigger.
[4]Trigger.
.
.
.
[90]Trigger.

感谢任何帮助。

Answer 1

添加元素时，RefreshClickEvent 中的循环适用于所有元素（包括添加的元素）。因此，您应该定义一个参数来向元素添加事件。另一个错误innerHTML分配内容。

function AddArticle() {

    let single_article = document.createElement("div");
    single_article.setAttribute("class", "each-article");

    single_article.innerHTML = `<div> ANY ARTICEL </div>`;

    let prices_summary = document.getElementById('prices-summary');
    prices_summary.appendChild(single_article);

    //Refresh the Event since we added on DIV to the NodeList
    RefreshClickEvent(single_article);
}

function RefreshClickEvent(element) {
        
    element.addEventListener('click', () => {

        console.log("Trigger.");
            
    });
}

JavaScript Click-Event 触发器每次点击触发多次

JavaScript Click-Event trigger fires several times per click

javascript

html

onclicklistener