0

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

上传图片后，新元素被添加到 DOM 中（为预览添加了img标签等）。创建此元素后，我需要能够附加点击事件。我该怎么做（检查此元素何时出现）？

编辑：

这是生成预览的代码：

$(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 );
});

});

4

2 回答 2

1

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

$("#" + slugify(file.name) ).find(".preview")
    .append( 
        $("<img class=img_upload title=\"" +
        file.name +
        "\" src=\"" + e.target.result + 
        "\" alt=\"\">").on("click", function( ) { // do stuff })
    );
于 2012-11-22T23:14:28.573 回答
0

尝试检查元素何时出现有点愚蠢。某些东西正在使元素出现！然后附加处理程序，或者至少跟踪元素，以便以后附加任何内容。

您如何创建预览节点？

于 2012-11-22T23:01:45.713 回答