Модальные поля не очищаются при закрытии в Bootstrap ⇐ Jquery

[Anonymous]

В настоящее время я работаю над веб-приложением, используя модальные окна Bootstrap и jQuery, и у меня возникают проблемы с очисткой полей ввода и других элементов в моем модальном окне, когда оно закрыто.
Я в моем приложении есть два модальных окна: одно для добавления новой категории, а другое для редактирования существующей категории. Вот фрагмент HTML для нового модального окна категории:

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

{% csrf_token %}


[h4]New Category[/h4]

×













Free


Paid




Save

Вот код jQuery, который я использую для обработки модального окна:

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

$(document).ready(function() {
$('#newCategoryModal').on('hidden.bs.modal', function() {
$('#new_name').val('');
$('#preview').attr('src', '').css('display', 'none');
$('#is_paid-pre').prop('checked', false);
$('#is_free-pre').prop('checked', false);
});

document.getElementById('new_image').addEventListener('change', function(event) {
const file = event.target.files[0];
const preview = document.getElementById('preview');

if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
}
reader.readAsDataURL(file);
} else {
preview.style.display = 'none';
}
});
});

Я реализовал прослушиватель событий jQuery для события Hidden.bs.modal модального окна, чтобы очищать поля ввода и сбрасывать предварительный просмотр изображения при каждом закрытии модального окна. В частности, я попробовал:
Установить значение поля ввода названия категории в пустую строку.
Установить для атрибута src предварительного просмотра изображения пустую строку и скрыть ее.
/>Снимаем оба переключателя для типа оплаты (Бесплатный/Платный).
Я ожидал, что когда я закрою модальное окно, все поля ввода, включая текстовый ввод для имени категории, предварительный просмотр изображения и переключатели будут сброшены в состояние по умолчанию, что позволит начать все заново при следующем открытии модального окна.
Когда я закрыл модальное окно, поля ввода и предварительный просмотр изображения не был четким, как предполагалось. Поле ввода по-прежнему содержало предыдущее значение, предварительный просмотр изображения оставался видимым, а переключатели сохраняли свое отмеченное состояние. Кажется, что код jQuery, отвечающий за очистку этих полей, выполняется, но поля не сбрасываются должным образом.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -bootstrap