創建元素後jquery函數不起作用

Question

我想在創建輸入元素後添加一個函數。但它不起作用。這是我的代碼。

<p id="pp"> 

    <input type="button" onclick="add();" value="Add Template"/><br> 
    Photo: <input type="file" id="chooseFiles" name="photo[]" class="inputFile"><br> 

    </p> 

    <script type="text/javascript"> 
    function add(){ 

     var text = document.createTextNode("Photo: "); 

     var input = document.createElement("input"); 
     input.type="file"; 
     input.name="photo[]"; 
     input.class="inputFile"; 

    }; 


$(".inputFile").change(function (e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 

     var file = e.originalEvent.srcElement.files[i]; 

     var img = document.createElement("img"); 
    img.style.width='300'; 
    img.style.height='auto'; 

     var reader = new FileReader(); 
     reader.onloadend = function() { 
      img.src = reader.result; 
     } 

     reader.readAsDataURL(file); 
     $(this).after(img); 
    } 
}); 

</script> 

現有的輸入工作。但之後的createElement，函數add（）不工作..

Answer 1

您需要delegate事件處理程序與動態創建的元素的工作，像

$(document).on("change",".inputFile",function (e) {})