jquery function does not work after creating an element -

this question has answer here:

• event binding on dynamically created elements? 18 answers

i want add function after create input element. didn't work. code.

 <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) {      (var = 0; < 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> 

the existing input works. after createelement, function add() doesn't work..

you need delegate event handler work dynamically created elements,

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