使用 JS 或 Jquery 向动态创建的元素添加事件

Question

I am creating a div block dynamically. In the div, i am having text fields and one file field and one hyperlink. on clicking the hyperlink, the div tag will be removed from its parent. coming to the file field, i want to add onchange event to the file, which is not working for me. Please check my code and correct me if i am wrong? this is my code:

<div id="incdiv" class="incdiv" name="incdiv">
<div id="increpeatdiv">
 <input type="file" class="" id="ifile" name="ifile" onchange="return filelogValidation('ifile')"/>
 </div>
  <a href='#' class="fw" onclick="repeat()">add one more Incident</a>
 </div>
 
 <script>
  function repeat(){
     var p=document.getElementById('incdiv')
      var element = document.createElement('div');
      element.id='increpeatdiv'+p.children.length;
      element.innerHTML='<input type="file" class="" id="ifile" name="ifile" onchange="return filelogValidation('ifile')"/>'+
        '<a href='#' class="fw" onclick="delete(this.parentNode.id)">Delete Incident</a>;';
        p.appendChild(element);
  }
  function delete(a){
   var p=document.getElementById(a)
  var h=document.getElementById('incdiv');
  h.removeChild(p);
  }
  function filelogValidation(input){
  var fileInput =   document.getElementById(input);        
            var filePath = fileInput.value;      
            var allowedExtensions =  
                    /(\.txt)$/i;  
                    if (!allowedExtensions.exec(filePath)) { 
                alert('Invalid file type. Please Upload .txt format'); 
                fileInput.value = ''; 
                return false; 
            }  
            else  return true;}
  }

I am guessing the problem to be of id "ifile". But I dont know how to solve it. Can somebody help me?

Answer 1

Check this

 <div id="incdiv" class="incdiv" name="incdiv"> <div id="increpeatdiv"> <input type="file" class="" id="ifile" name="ifile" onchange="return filelogValidation('ifile')"/> </div> <a href='#' class="fw" onclick="repeat()">add one more Incident</a> </div> <script> var i = 1; //index for doing identity to ifiles like ifile_1, ifile_2... function repeat(){ var p=document.getElementById('incdiv') var element = document.createElement('div'); element.id='increpeatdiv_'+i; element.innerHTML="<input type=\"file\" class=\"\" id=\"ifile_"+i+"\" name=\"ifile\" onchange=\"return filelogValidation(this.id)\"/>"+ "<a href='#' class=\"fw\" onclick=\"delete_(this.parentNode.id)\">Delete Incident</a>;"; p.appendChild(element); i++; } function delete_(a){ var p=document.getElementById(a) var h=document.getElementById('incdiv'); h.removeChild(p); } function filelogValidation(input){ var fileInput = document.getElementById(input); var filePath = fileInput.value; var allowedExtensions = /(\.txt)$/i; if (.filePath.match(allowedExtensions)) { alert('Invalid file type. Please Upload;txt format'). fileInput;value = ''; return false; } else return true; } </script>