Question

我正在使用html5Uploader上传图片，一切正常。我感兴趣的部分如下：

上传图片后，新元素正在添加到DOM中（预览中添加了 img 标记等）。创建此元素后，我需要能够附加一个on click事件。我该怎么做（检查这个元素何时出现）？

修改

这是产生预览的代码：

$(function()
    {var fileTemplate="<div id=\"{{id}}\">";
    fileTemplate+="<div class=\"preview\"></div>";
    fileTemplate+="<div class=\"filename\">{{filename}}</div>";
    fileTemplate+="</div>";
    function slugify(text)
    {
        text=text.replace(/[^-a-zA-Z0-9,&\s]+/ig,'');
        text=text.replace(/-/gi,"_");text=text.replace(/\s/gi,"-");
        return text;
    }
$("#dropbox").html5Uploader({
    postUrl: "<?php echo base_url() ?>admin/image_upload",
onClientLoadStart:function(e,file)
    {var upload=$("#upload");
    if(upload.is(":hidden"))
        {upload.show();}
upload.append(fileTemplate.replace(/{{id}}/g,slugify(file.name)).replace(/{{filename}}/g,file.name));},
onClientLoad:function(e,file)
{$("#"+slugify(file.name)).find(".preview").append("<img class=img_upload title=\"" + file.name + "\" src=\""+e.target.result+"\" alt=\"\">");},
onServerLoad:function(e,file)
        {}
    });

这是我需要尝试附加点击事件的部分：

$('.preview').on('click', '.img_upload', function(){
var _val = textarea.val(),
img_src = '<img src="<?php echo IMG ?>vesti/' + $(this).attr('title') + '" />';
console.log(img_src);
textarea.val( _val + img_src );
});

}）;

Answer 1

您可以更改将图像附加到预览元素的代码

$("#" + slugify(file.name) ).find(".preview")
    .append( 
        $("<img class=img_upload title=\"" +
        file.name +
        "\" src=\"" + e.target.result + 
        "\" alt=\"\">").on("click", function( ) { // do stuff })
    );

Answer 2

尝试检查元素何时出现是一种愚蠢的行为。有些东西正在使元素出现！然后附上处理程序，或者至少跟踪元素，以便稍后可以附加任何内容。

您是如何创建预览节点的？

Jquery - 在图像上传后查找元素

2 个答案: