0 
<form id="upload_form" action="" method="post">
      <label for="file_input">Select Files to Upload:</label>
       <input id="file_input" type="file"  multiple>
</form>
</p>
<input id="add" type="submit" value="add to canvas" >
<div id="layers_list" class="layers_col" ></div>
<script>
$(document).ready(function(){
    var file_input = $('#file_input');
    var layers_list = $('#layers_list');

    file_input.on('change',onFilesSelected);
    function onFilesSelected(event){
        var files = event.target.files;
        for(var i= 0;i<files.length; i++){
            var img = $("<img/>").attr("src",URL.createObjectURL(files[i]));
            img.attr("title", files[i].name);
            var heading = $("<h3></h3>").text(files[i].name.substr(0,12));
            $("<li></li>").append(img).append(heading).appendTo(".layers_col");
        }
    }
   $("#layers_list li img").click(function(){
        $(this).data('select',true);     //add images on click
        console.log("clicked");              
    });
    $("#add").click(function(){
         var selectedImgs = [];
        $("#layers_list li img").each(function(){
           $(this).data("select")? selectedImgs.push(this.name):false; //choose //selected images
         });
         alert(selectedImgs.join(','));
    });
});
</script>

画像タグのリストを動的に作成した後、画像を選択したり、データ配列に保存したりできません。どうすればこれを機能させることができますか？

4

3 に答える 3

1

動的に生成される要素にイベントを追加する場合は、 event を使用して必要なイベントを追加/バインドする必要がありますon。

例えば。

$("#layers_list").on('click', "li img", function(){
//code goes here..
})
于 2013-06-05T09:56:26.487 に答える
1

動的に作成された要素にイベント委任を使用します。

$(document).on('click', '#layers_list li img', function(){
    $(this).data('select', true);     //add images on click
    console.log("clicked");              
});
于 2013-06-05T09:52:48.750 に答える
0

変化する

$("#layers_list li img").click(function(){

に

$("#layers_list").on('click', "li img", function(){
于 2013-06-05T09:53:31.410 に答える