0

我正在使用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();
                }
            }
        });
    });
});

请注意，从长远来看，我不会只使用 click 事件处理程序删除图像，这只是为了测试目的，直到我让它工作，之后我将使用更强大的方法。

任何帮助表示赞赏。

4

2 回答 2

0

据我了解，您需要将委托与 . 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();
            }
        }
    });
});
于 2013-05-31T10:23:53.387 回答
0

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

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

对此

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

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

更多关于它的信息：

于 2013-05-31T10:24:40.257 回答