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

Question

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

<input type='file' style="width: 70%" name="anhang[]" class="anhang" id="anhang0" multiple/>

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('<tr class="datei_anhang"><td style="width: 25%;">Anhang:</td><td><input style="width: 70%" class="anhang" id="anhang'+inputCounter+'" type="file" name="anhang[]" multiple/><input style="width: 20%; margin-left: 5px" type="button" class="entf" id="entf'+inputCounter+'" value="Entfernen"/></td></tr>').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/

Answer 1

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();
  }
});