0

html5Uploaderを使用して画像をアップロードしていますが、すべて正常に機能しています。私が興味を持っている部分は次のとおりです。

画像がアップロードされた後、新しい要素がDOMに追加されます（プレビュー用にimgタグが追加されます）。この要素を作成したら、onclickイベントを添付できるようにする必要があります。どうすればこれを行うことができますか（この要素がいつ表示されるかを確認してください）？

編集：

これはプレビューを生成しているコードです：

$(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 に答える