Event handler for AJAX generated HTML

vbulash

One of my cell is generated BS5 dropdown menu generated on server side.

<div class="dropdown actions-container">
    <button type="button" class="btn btn-primary dropdown-toggle show actions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        ...
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown-dropup-primary" data-popper-placement="top-start">
        ...
    </div>
</div>

I want to add event handler on div class actions-container:

const actions_div_collection = document.getElementsByClassName("actions-container")
            for (let actions_div of actions_div_collection) {
                actions_div.addEventListener('show.bs.dropdown', (event) => {
                    console.log('show actions')
                })
            }

Actually, this listener is not added = not working (empty collection).
Guess because cell content generated dynamically.
But how to add listeners for generated HTML elements? Is it possible?

kthorngren

Use delegated events as shown in this example.

Kevin

vbulash

Thanks a lot.
It works great!