Модальное окно bootstrap v5.3 не закрывается динамически, но закрывается динамически вместе с другими отправками ⇐ Jquery

[Anonymous]

У меня есть модальное окно начальной загрузки с id="dynModal". Я динамически добавляю контент в dynModal с помощью jquery, и после успешного завершения действия или запроса ajax модальное окно очищается, а затем выполняется код, чтобы затем закрыть его. Проблема в том, что он работает с некоторыми кнопками, которые выполняют модальное окно, а затем вообще не работает с другими кнопками.

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

$(function () {
var dynModal = new bootstrap.Modal(document.getElementById('dynModal'), { backdrop: 'static' });

$("body").on("click", ".editProxyHost", function(e) {
$("#dynModal .modal-dialog").addClass("modal-lg");
$("#modalTitle").empty().append("Edit Proxy Host");
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
},
type: 'POST',
url: '/url/fetch',
dataType: "json",
data: {
hostID: $(this).attr("data-host-id")
},
success: function(response) {
$("#dynModal .modal-dialog").addClass("modal-lg");
$("#dynModal .modal-body").empty().append(`

// formdata

`);
$("#dynModal .modal-footer").empty().append(`
Cancel
Save
`);
dynModal.show();
},
error: function(response) {
// Handle error response
console.error('Error:', response);
alert('An error occurred while submitting the form. Please try again.');
}
});
});

$("body").on("click", "#saveModal", function(e) {
switch ($(this).attr("data-mode")) {
case 'editProxyHost':
var form = $("#proxyHostForm");
var formData = form.serializeArray();
if (form[0].reportValidity()) {
var serializedData = $.param(formData);

$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
},
type: 'POST',
url: '/url',
dataType: "json",
data: serializedData,
success: function(response) {
console.log(response);
const modalInstance = bootstrap.Modal.getInstance("#dynModal");
modalInstance.hide();
$("#modalTitle").empty();
$("#dynModal .modal-body").empty();
$("#dynModal .modal-footer").empty();
},
error: function(response) {
console.error('Error:', response);
alert('An error occurred while submitting the form. Please try again.');
}
});
} else {
let firstInvalidElement = form.find(':invalid').first();
let firstInvalidTabPane = firstInvalidElement.closest(".tab-pane");
let firstInvalidTabId = firstInvalidTabPane.attr("id");
let firstInvalidTabTrigger = document.querySelector(`button[data-bs-target="#${firstInvalidTabId}"]`);
if (firstInvalidTabTrigger) {
let tabInstance = new bootstrap.Tab(firstInvalidTabTrigger);
tabInstance.show();
}
form[0].reportValidity();
}
break;
}
});
});

Это один из модальных окон, который не закрывается после сохранения, а очищает модальное окно.
Я использую этот метод для довольно многих модальных окон. и все они закрываются, кроме этого:
Следующее просто отказывается выполняться:

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

const modalInstance = bootstrap.Modal.getInstance("#dynModal");
modalInstance.hide();

Модальное окно должно просто закрыться, а затем стать пустым, но это не так. У меня есть другие кнопки, которые запускают одно и то же модальное окно, и после нажатия #saveModal и успешного ответа формы ajax они динамически закрывают модальное окно, за исключением этого.

Подробнее здесь: https://stackoverflow.com/questions/791 ... th-other-s