JavaScript Click-Event trigger fires several times per click

Question

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.

are you running the "AddArticle" method multiple times ? Because it will add a new event listener to each article. One optimization would be to add an event listener only to the parent node of your "articles". — Kevin ALBRECHT
– Kevin ALBRECHT, Commented Oct 10, 2021 at 14:12
For each element you're adding you're adding new listeners to all the elements rather than just that one. Kevin is right. Use event delegation. — Andy
– Andy, Commented Oct 10, 2021 at 14:15
Thanks everybody. That seems to be exactly the problem. Yes I am running AddArticle multiple times. I will try working with the parent or event delegation, now I know where to go. Thanks! — ZBop
– ZBop, Commented Oct 10, 2021 at 14:19

Raven Murphy · Accepted Answer · 2021-10-10 14:18:21Z

1

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

answered Oct 10, 2021 at 14:18

Raven Murphy

18110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ZBop Over a year ago

thanks! How would you rather recommend me to assign content dynamically?

Raven Murphy Over a year ago

single_article.setAttribute('contenteditable', 'true')

Collectives™ on Stack Overflow

JavaScript Click-Event trigger fires several times per click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related