Jquery - 이미지 업로드 후 요소 찾기

Question

이미지를 업로드하는 데 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); 
}); 

을

});

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

요소가 나타나면 확인하고 시도하는 것은 어리석은 일입니다. 뭔가 요소가 나타납니다! 그런 다음 핸들러를 연결하거나 나중에 요소를 추적하여 나중에 첨부 할 수 있습니다.

미리보기 노드는 어떻게 만드십니까? .