Input event not recognised on in Edge

问题

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/

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

回答2:

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 () {
     $('<div/>', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container');
     $('#addRow').click(function () {
           $('<div/>', {
               '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();    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extraFileTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="Select File" type="file" name="file_name">
       
        <input type=button value="clear" name="cler">
    </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another file</p></a>

Output in Edge:

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

来源：https://stackoverflow.com/questions/52404212/input-event-not-recognised-on-input-type-file-in-edge

标签

javascript