Jak vyvolat událost na prvku po překreslení

ForestCZE

Ahoj, vím, že se to tu už řešilo hodněkrát. Dokonce i mimo Nette, ale nějak to nedokážu pochopit, tudíž ani nevím, jak to napsat správně.

Latte:

{snippet persons}
    <table class="records records_h">
        <tr>
            <th>Jméno</th>
            <th>Narozen(a)</th>
            <th>Telefonní číslo</th>
        </tr>

        {ifset $characters}
            {foreach $characters as $character}
                <tr>
                    <td><a class="fillCard" n:href="System:newCard id => $character->identifier">{$character->lastname} {$character->firstname}</a></td>
                    <td>{$character->dateofbirth|date:'j. n. Y'}</td>
                    <td>{$character->phone_number}</td>
                </tr>
            {/foreach}
        {/ifset}
    </table>
{/snippet}

Javascript:

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];
                });
            });
        }
    }
}

Vím, že event nefunguje, protože je to dynamicky překreslené. Začne to fungovat až po realodu stránky. Je nějaká jednoduchá cesta, jak tomu říct, aby to vyvolalo u těch dynamických prvků?

Keeehi

Nejjednodušší je událost navěsit na předka co se nepřekresluje (v příkladu document ale můžeto být klidně něco bližšího) a jelikož pak budou vznikat události co nechceš, tak je filtrovat.

document.addEventListener('click', function (event) {
    if (!event.target.matches('.fillCard')) {
        return;
    }

	// kód co potrebuješ
});

Editoval Keeehi (23. 4. 2021 15:15)

ForestCZE

Keeehi napsal(a):

Nejjednodušší je událost navěsit na předka co se nepřekresluje (v příkladu document ale můžeto být klidně něco bližšího) a jelikož pak budou vznikat události co nechceš, tak je filtrovat.
document.addEventListener('click', function (event) {
    if (!event.target.matches('.fillCard')) {
        return;
    }

	// kód co potrebuješ
});

Upravil jsem takto:

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];
        });
    });
}

A funguje to, díky :)