adding events to dynamically created elements using JS or 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?

I believe this is where Event Delegation becomes useful. Instead of adding eventListeners to each element manually (which is a slower, cumbersome method), adding one event listener to the parent will allow you to add new child elements to that parent and still have the event occur on the new child. — kvncnls, Aug 21 '20 at 17:18
The problem lies where you set the `innerHTML` of the `div`. You would need to escape the `'` used. Rest everything works as you intend it to. Use this: ``` element.innerHTML=''+ 'Delete Incident;';``` — Kunal Kukreja, Aug 21 '20 at 17:31
If `ifile` the name or a variable? If it's the name: then `.. onchange="return filelogValidation(\'ifile\')"..` — freedomn-m, Aug 21 '20 at 17:47
Does this answer your question? [When should I use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-should-i-use-double-or-single-quotes-in-javascript) — freedomn-m, Aug 21 '20 at 17:49

Ikrom Jalolov · Accepted Answer · 2020-08-21T17:46:48.380

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>

Bit excessive on the `"` and `\"` - that's what using `"` and `'` are for - just sometimes someone wants to put `'` inside `'` and doesn't know how — freedomn-m, Aug 21 '20 at 17:48

adding events to dynamically created elements using JS or Jquery

1 Answers1