Нажать на изображение не выбрано

Question

<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> 

После динамического создания списка тегов изображений я не могу выбирать изображения или хранить их в массиве данных. как заставить это работать?

Answer 1

Использование event delegation для динамически создаваемых элементов:

$(document).on('click', '#layers_list li img', function(){ 
    $(this).data('select', true);  //add images on click 
    console.log("clicked");    
}); 

Answer 2

Изменить

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

в

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

Answer 3

Если вы хотите добавить любое событие для элементов, которые генерируются динамически, вам нужно для добавления/связывания требуемого события с использованием события on.

например.

$("#layers_list").on('click', "li img", function(){ 
//code goes here.. 
})