Как анализировать элементы DOM с помощью библиотеки Flowbite ⇐ Javascript

[Anonymous]

Я работаю над веб-сайтом, который является CRUD. Поскольку он размещен на управляемом сервере, я использую HTML, Tailwind CSS, Flowbite CSS/JS, vanilla JS и jQuery для внешнего интерфейса. Интерфейс имеет два модальных окна, которые работают с библиотекой Flowbite и имеют следующие идентификаторы: modal-customer и modal-edit. Оба они находятся в моем основном HTML-файле, когда DOM загружается, поэтому Flowbite может без проблем инициализировать модальные окна.
Сначала модальный клиент открывается с помощью следующей кнопки которые имеют атрибуты data-target-* и data-toggle-*, как указано в официальной документации. Затем у модального клиента есть таблица, которая динамически заполняется записями, полученными из серверной части. Эти данные получаются через AJAX и затем используются для добавления строк в таблицу. В последнем столбце есть кнопка редактирования, которая также имеет атрибуты data-target-* и data-toggle-*. Однако, поскольку эти элементы не присутствовали, когда DOM загружался и Flowbite анализировал его, они не работают для открытия второго модального окна редактирования.
Я пытался повторно инициализируйте Flowbite, используя window.initFlowbite(). Хотя это и заставляет кнопки редактирования работать, все заново инициализируется, в результате чего окно modal-customer открывается дважды: один раз для экземпляра, который изначально был открыт через пользовательский интерфейс, и один раз для строки window.initFlowbite()< /code>.
Я также пытался обрабатывать генерируемые события, вместо этого нажимая кнопки редактирования:

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

if (event.target && event.target.closest('.service_edit')) {
const modal = FlowbiteInstances.getInstance('Modal', 'modal-edit');
modal.show();
}

Хотя это работает, Flowbite не может определить наличие кнопок для открытия модального редактирования. Это приводит к тому, что в консоли постоянно отображается следующее сообщение:

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

Modal with id modal-edit has not been initialized. Please initialize it using the data-modal-target attribute.

Буду признателен за любую помощь в решении этой проблемы. Я подумал об использовании второго подхода: ручной обработке щелчков по кнопкам редактирования и добавлении скрытого элемента в HTML-файл с атрибутами data-target-* и data-toggle-*, связанными с modal-edit, чтобы Flowbite прочитал это и не отображал сообщение консоли. Однако это кажется неподходящим решением. Есть ли способ проанализировать данные элементы DOM с помощью Flowbite вместо того, чтобы снова анализировать все с помощью window.initFlowbite()?

Подробнее здесь: https://stackoverflow.com/questions/793 ... es-library