javascript - 使用 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 元素上注册的。