I have looked at similiar posts but I cant seem to find a Solution.

So the issue I am facing is that I dynamically add divs with content. If you click on that generated content, sth happens. Problem is that the clicklick Event fires several times. Interesting is, that it actually starts with only 1 trigger, goes up to 2,4,6,10,20,40 etc. triggers per click.

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.

Appreciate any help.

CodePudding user response：

When you add an element, the loop in RefreshClickEvent works for all elements (including the elements that were added). So, you should define a parameter to add event to an element. Another mistake innerHTML to assign content.

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