Javascript how to trigger dynamically created buttons? [duplicate]

Question

I have the following piece of Javascript code that works when the DOM is loaded. But when I add new buttons dynamically (after dropzone upload), those new buttons don't respond. What should I add to this script?

document.querySelectorAll('.to-delete').forEach((el) => el.addEventListener('click', function(e) {
    e.preventDefault();
    if (confirm("Press a button!")) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'id': el.getAttribute('data-delete-attachment'),
            })

        }).then(response => {
            if (response.ok) {
                el.closest('.columns').remove();
            }
        }).catch(err => {
            console.error(err);
        });
        //console.log();
    }
}));

You should add listeners to those buttons you're creating dynamically, i.e., as you create the buttons and add them to the DOM you need to attach onclick listeners to them with the same handler. — Ameer
– Ameer, Commented Jul 22, 2021 at 14:24
Non-jQuery answer here: stackoverflow.com/a/27373951/5734311 — user5734311
– user5734311, Commented Jul 22, 2021 at 14:27
@Kinglish That's not a duplicate of this question. Yours is about var and assigning event handlers in a loop (and the well known pitfall of that), and the current answer to that is to use let instead anyway. — user5734311
– user5734311, Commented Jul 22, 2021 at 14:29

Kelvin Schoofs · Accepted Answer · 2021-07-22 14:24:37Z

2

You basically need to attach the event listener to the new elements whenever you create them and add them to the DOM.

If you somehow can't modify the code that creates those elements, you could make an interval that checks for new elements every second or so, but this is of course more of a hack.

answered Jul 22, 2021 at 14:24

Kelvin Schoofs

8,7462 gold badges17 silver badges34 bronze badges

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

1 Comment

user5734311 Over a year ago

Here's the existing answer that offers a better way to do this. Please check for duplicates before posting answers.

Collectives™ on Stack Overflow

Javascript how to trigger dynamically created buttons? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related