Input event not recognised on in Edge

Question

I have a build a dynamic generating Formular including some input fields.

If this input field is filled a new one is generated. The input event listener which is calling the method for generating the new field is the main problem I´m facing:

$(document.body).on("input", ".anhang", function (e) {
  alert("input");
  addFileInput();
});

var inputCounter = 0;

function addFileInput(){
  inputCounter++;
  $('#fileInput').after('Anhang:').insertAfter($('.datei_anhang').last());               
}

When I use a click event listener like this one it is working:

$("#anhang0").on("click", function (e) {
  alert("input");
  addFileInput();
});

But this solution does not bring me the behavior I want to have.

Can Someone tell me, why it works in every browser I have tested, but not in Edge? How would I have to change the Event Listener to make it work in Edge and keep the expected behavior?

I´m using Jquery 3.x. If you need any further information to help, just write it in the comments.

Thanks in advance.

Here is a fiddle for demonstration: http://jsfiddle.net/tm643v8w/7/

user_9958942 · Answer

For some reason Edge seems to have trouble with the input event on file selection (file input browser compatibility chart suggests that Edge just may not have all of its ducks in a row for file input elements). You can use the change event instead to get the results you want across browsers (and you should probably also check to be sure that a file has actually been selected). For example:

$('.anhang').on('change', function(e) {
  if (this.files.length) {
    alert('file selected');
    addFileInput();
  }
});

user_10309381 · Answer

For a work around in a Edge,

You can try to add a link to add a new row with controls, which is working in most of the browsers including Edge.

 $(document).ready(function () {
     $('', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container');
     $('#addRow').click(function () {
           $('', {
               'class' : 'extraPerson', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');
         
     });
 })
 function GetHtml()
{
      var len = $('.extraPerson').length;
    var $html = $('.extraFileTemplate').clone();
    $html.find('[name=file_name]')[0].name="file_name" + len;
   
    $html.find('[name=cler]')[0].name="cler" + len;
    return $html.html();    
}



    
        
       
        
    


 Add another file

Output in Edge:

This is just a sample example for you. Further you can try to modify the code as per your requirement.

Input event not recognised on <input type="file"> in Edge

2 Answers