htmx.process(elt) for elements loaded from the Virtual DOM

[see7e]

Is your feature request related to a problem? Please describe.*

I'm currently working with Django and HTMX to partially content, some of them using Tabulator, but the problem comes when some of the element rendered are "hidden" in the the Virtual DOM, loaded through pageLoaded or by pageSizeChanged.

Describe the solution you'd like

In order to get around this issue I need to target the mentioned events and find and process every element, this (I think) could be done optionaly as not everyone uses HTMX but would be very nice to process the rows (or cell) elements natively.

Describe alternatives you've considered

As said above I monitor the events to avoid fetching and processing more than needed (added some code at the additional contex).

Additional context

<!-- the rows loaded at the table -->
{% for r in rows %}
    <tr id="row-{{ r.pk }}" class="loaded-row align-middle">
        <!-- other td elements -->
        <td class="actions">
            <button class="btn btn-secondary btn-sm"
                hx-get="{% url 'url_pttrn_name' pk=r.pk %}"
                hx-target="#dialog"
            > <i class="fa fa-pen"></i> </button>
        </td>
    </tr>
{% endfor %}

/**
 * Process all button elements of the page.
 */
function processHTMXButtons() {
    const btns = document.querySelectorAll(".btn");
    btns.forEach(btn => {
        htmx.process(btn);
    });
}

// Initialize Tabulator
const table = new Tabulator(id, tableOptions);

// Events
document.addEventListener("htmx:afterTableContentUpdate", function () {
    table.on("pageLoaded", processHTMXButtons);
    table.on("pageSizeChanged", processHTMXButtons);
});

// Emit a htmx event after the table is initialized
document.dispatchEvent(new Event("htmx:afterTableInit"));
htmx.process(table.element); // This works only for the elements outside VirtualDOM

[see7e]

Find here the refered method of the issue.