Функция 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) {})