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

【问题标题】：JavaScript Click-Event trigger fires several times per clickJavaScript Click-Event 触发器每次点击触发多次
【发布时间】：2021-10-10 14:03:42
【问题描述】：

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

所以我面临的问题是我动态添加带有内容的 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.

感谢任何帮助。

【问题讨论】：

分享你的 HTML 代码
您是否多次运行“AddArticle”方法？因为它会为每篇文章添加一个新的事件监听器。一种优化是仅将事件侦听器添加到“文章”的父节点。
对于您添加的每个元素，您都在为所有元素添加新的侦听器，而不仅仅是那个。凯文是对的。使用event delegation。
谢谢大家。这似乎正是问题所在。是的，我多次运行 AddArticle。我将尝试与家长或事件委托合作，现在我知道该去哪里了。谢谢！

标签： javascript html onclicklistener

【解决方案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.");
            
    });
}

【讨论】：

谢谢！您更愿意建议我如何动态分配内容？
single_article.setAttribute('contenteditable', 'true')