在點擊圖片未選中

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

動態創建圖像標籤列表後，我無法選擇圖像或將它們存儲在數據數組中。如何使這個工作？在點擊圖片未選中

來源

2013-06-05 user1523292

這是每天要問很多次。有人提到了一個關閉的好問題嗎？ –

[Event listener not working on dynamic added element]的可能重複（http://stackoverflow.com/questions/14841344/event-listener-not-working-on-dynamically-added-element） –

隨時讓我知道如果我的答案有用或沒有:)謝謝！ – lifetimes

使用event delegation用於動態創建的元素：

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

來源

2013-06-05 09:52:48 lifetimes

我們真的需要從'document'的基節點委託事件嗎？ –

變化

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

到

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

來源

2013-06-05 09:53:31

如果你想添加任何事件被動態生成的元素，你需要使用on事件添加/綁定所需事件。

例如。

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

來源

2013-06-05 09:56:26

在點擊圖片未選中

回答

相關問題