Question

I am using html5Uploader to upload images and everything is working fine. The part I am interested is the following:

After images are uploaded, new elements are being added to the DOM (img tag is added for the preview, among others).
After this element is created, I need to be able to attach an on click event. How can I do this (check when this element appears)?

EDIT:

This is the code that is producing preview:

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

And this is the part where I need try to attach on click event:

$('.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

You can change the code that attaches the image to the preview element

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