How to trigger any event for dynamic element?

Question

I have this one:

function fillCard()
{
    const persons = document.getElementsByClassName("fillCard");
    if(persons !== null)
    {
        for (var i = 0; i < persons.length; i++)
        {
            persons[i].addEventListener("click", function(event){
                event.preventDefault();
                var getUrl = this.getAttribute("href");
                var url = new URL(location.origin + getUrl);
                var Id = url.searchParams.get("id");
                fetch(getUrl + "&id=" + Id + "&do=fillCard")
                .then(response => response.json())
                .then(data => {
                    document.getElementById("frm-newCard-lastname").value = data[0];
                    document.getElementById("frm-newCard-firstname").value = data[1];
                    document.getElementById("frm-newCard-dateofbirth").value = data[2];
                    document.getElementById("frm-newCard-phone_number").value = data[3];
                    document.getElementsByName("identifier")[0].value = data[4];
                });
            });
        }
    }
}

The problem is - those elements with class name fillCard are created dynamically by AJAX. The event listener does not work then. How to trigger the event properly? Thank you in advance for help.

https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Teemu, Apr 23 '21 at 09:45
@JeremyThille How? I realize there is several topics with the same problem, but I'm not able to understand. — Forest, Apr 23 '21 at 09:56
Please edit your original question and add the code in it, don't answer your own question. Besides, what you have added is not an ajax call, it's a template. You said the elements were created with an ajax call — Jeremy Thille, Apr 23 '21 at 10:46
Unfortunately this code is too long. Yes, it's template, but the code inside **snippet** is created by ajax request. — Forest, Apr 23 '21 at 10:52

score 0 · Answer 1 · answered Apr 23 '21 at 14:11

Solution:

function fillCard()
{
    document.addEventListener("click", function(e){
        if(!e.target.matches('.fillCard'))
            return;
        
        e.preventDefault();
        var getUrl = e.target.getAttribute("href");
        var url = new URL(location.origin + getUrl);
        var Id = url.searchParams.get("id");
        fetch(getUrl + "&id=" + Id + "&do=fillCard")
                .then(response => response.json())
                .then(data => {
                    document.getElementById("frm-newCard-lastname").value = data[0];
            document.getElementById("frm-newCard-firstname").value = data[1];
            document.getElementById("frm-newCard-dateofbirth").value = data[2];
            document.getElementById("frm-newCard-phone_number").value = data[3];
            document.getElementsByName("identifier")[0].value = data[4];
        });
    });
}

How to trigger any event for dynamic element?

1 Answers1