Question

我正在使用uploadifive并且实际的图片上传工作正常，而且我已修改为在成功上传时显示上传的图片。但是，我希望用户能够删除图像，如果它不正确，并且图像被附加到div我知道我需要将on（）事件处理程序绑定到最初不在DOM中的图像但是我无法弄清楚如何做到这一点。我当前的jQuery（对于图像上传和删除后页面刷新都很好）是：

$('#file_upload').uploadifive({
    'uploadScript' : 'imageUpload.php',
    'removeCompleted' : true,
    'onUploadComplete' : function(file, data) {
        $('.display-images').append(data);
    }
});

$('.display-images img').each(function(){
    $(this).on('click', function(){
        var removeImg = $(this);
        var image = $(this).attr("src");
        var large = image.replace("tmp-images/", "").replace("-tb", "");
        var thumb = image.replace("tmp-images/", "");
        dataString = 'delete=1&large_image=' + large + '&thumb_image=' + thumb;
        $.ajax ({
            type: "GET",
            url: "deleteTempImage.php",
            data: dataString,
            cache: false,
            success: function(data)
            {
                if (data) {
                    $(removeImg).remove();
                }
            }
        });
    });
});

请注意，我不会长期使用点击事件处理程序删除图像，这只是为了测试目的，直到我开始工作，之后我将使用更强大的方法。

任何帮助表示感谢。

Answer 1

据我了解，您需要使用委派。on()：

这里我使用文档作为委托。正确的方法是使用最接近的容器元素作为委托。因此，如果'.display-images'元素不是动态的，请将其用作委托。

$(document).on('click','.display-images img', function(){
    var removeImg = $(this);
    var image = $(this).attr("src");
    var large = image.replace("tmp-images/", "").replace("-tb", "");
    var thumb = image.replace("tmp-images/", "");
    dataString = 'delete=1&large_image=' + large + '&thumb_image=' + thumb;
    $.ajax ({
        type: "GET",
        url: "deleteTempImage.php",
        data: dataString,
        cache: false,
        success: function(data)
        {
            if (data) {
                $(removeImg).remove();
            }
        }
    });
});

Answer 2

您在此处设置事件委派的方式不正确。您需要更改代码：

$('.display-images img').each(function(){
    $(this).on('click', function(){
        // Your code here
    });
});

到这个

$('.display-images').on('click', 'img', function () {
    // Your code here
});

这会将您的事件附加到.display-images元素中的任何锚点，减少必须检查整个document元素树并提高效率的范围。

有关它的更多信息：

将on（）事件处理程序赋给附加元素（使用uploadifive）

2 个答案: