Функция загрузки нескольких изображений с jquery - предварительный просмотр изображений не исчезнет при нажатии

Question

У меня есть функция в форме, которая позволяет многократно загружать изображения.

Когда вы выбираете изображения, которые вы хотите загрузить, они отображают небольшой эскиз их. Однако я подумал, что было бы просто сделать так, чтобы эти изображения исчезали при нажатии, но это не работает.

См. Код ниже. Кажется, функция подтверждения изображения предварительного просмотра не подтверждена, и нет никаких ошибок консоли, чтобы выручить меня. При нажатии ничего не происходит.

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img class="preview-img">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#upload').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });

    $(".preview-img").click(function(){
        $(this).hide();
    });

});

Answer 1

Функция reader.onload выполняется асинхронно. Таким образом, обработчик щелчков изображения для предварительного просмотра регистрируется до того, как изображения становятся доступны в DOM. Вы можете убедиться в этом, зарегистрировав обработчик щелчка вручную через консоль JavaScript после того, как все изображения были отрисованы.

Вы должны использовать следующий код для настройки обработчика события щелчка:

$(document).on("click", ".preview-img", function() {
    $(this).hide();
});

Это все еще будет работать после изменения DOM, так как обработчик зарегистрирован в документе вместо img-элементов, которые еще не существуют.

Answer 2

Изменить эту строку:

$(".preview-img").click(function(){
       $(this).hide();
  });

На это:

$("body").on('click','.preview-img',function(){
    $(this).hide();
});

Этот прослушиватель событий обнаружит динамически добавленные элементы