Как сохранить JS слушатель в элементе после запроса загрузки с помощью HTMX? ⇐ Javascript

[Anonymous]

Я работаю над такими данными, как на скриншоте. Форма позволяет добавлять линию, и она отлично работает. Вот код (Symfony + Twig): < /p>

Код: Выделить всё

{{ form_start(parcelForm, {'attr': {
'hx-post': path('app_tableau_order_view', {'code': order.code}),
'hx-target': 'body',
'class': 'row g-3 align-items-center'
}}) }}
...
{{ 'app.actions.add'|trans }}
{{ form_rest(parcelForm) }}
{{ form_end(parcelForm) }}

Мы можем обновлять в линии и удалить строку. Когда мы хотим удалить, у нас сначала есть предупреждение. Отлично работает в первый раз (загрузка страницы или первое удаление). Вот код удаления и ожидающий компонент (sweetAlert2 modal):


{# table.html.twig #}

{{ ux_icon('lucide:package-minus', {height:'16px', class: 'opacity-75 p-0 m-0 text-danger'}) }}


js (вдохновленный https://htmx.org/examples/confirm/):

Код: Выделить всё

// row_delete.js
document.querySelectorAll("[data-delete]").forEach(btn => {
btn.addEventListener("htmx:confirm", function (e) {
if (!e.detail.question) return
e.preventDefault()

Swal.fire({
title: "Proceed?",
text: `${e.detail.question}`,
}).then(function (result) {
if (result.isConfirmed) {
e.detail.issueRequest(true);
}
})
});
})

Но после добавления новой строки или редактирования, когда я нажимаю на кнопку «Удалить». https://hypermedia.systems/client-side-scripting/.
обходной путь: если я перемещаю код JS в файл Twig, все работает. Однако это не то, как я хочу организовать свои файлы. Я обеспокоен разделением проблем, но с местом поведения.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -with-htmx