为附加元素分配on()事件处理程序(使用uploadifive)

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

您在这里设置事件委托的方式不合适。你需要修改你的代码:

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

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

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

更多信息在这里:

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 2

据我所知，您需要使用委派。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();
            }
        }
    });
});