在 Edge 中的 <input type="file"> 上无法识别输入事件答案

【问题标题】：Input event not recognised on <input type="file"> in Edge在 Edge 中的 <input type="file"> 上无法识别输入事件
【发布时间】：2019-02-23 12:44:49
【问题描述】：

我有一个包含一些输入字段的动态生成公式。

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

如果此输入字段被填充，则会生成一个新字段。调用生成新字段的方法的input 事件监听器是我面临的主要问题：

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

当我使用像这样的 click 事件侦听器时，它正在工作：

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

但是这个解决方案并没有给我带来我想要的行为。

有人能告诉我，为什么它在我测试过的所有浏览器中都有效，但在 Edge 中无效？我将如何更改事件侦听器以使其在 Edge 中工作并保持预期的行为？

我正在使用 Jquery 3.x。如果您需要任何进一步的信息来帮助，只需将其写在 cmets 中即可。

提前致谢。

这是一个用于演示的小提琴：http://jsfiddle.net/tm643v8w/7/

【问题讨论】：

如果您可以向我们展示问题的完整工作示例，或者至少是 HTML 和 CSS，这将有助于诊断问题。另请注意，$('#fileInput').after('.. htmlString ..').insertAfter($('.datei_anhang').last()); 行的逻辑非常奇怪，以至于它可能会导致 HTML 的有效性出现问题，但如果没有更多信息，则无法确定
嘿，我添加了一个小提琴：jsfiddle.net/tm643v8w/7。关于您的评论..我知道这不是一个完美的解决方案，但我没有得到更好的解决方案..

标签： javascript jquery file microsoft-edge html-input

【解决方案1】：

由于某种原因，Edge 似乎在文件选择上的input 事件上遇到了问题（file input browser compatibility chart 表明 Edge 可能没有将所有的鸭子放在一行中以用于文件输入元素）。您可以改用change 事件来获得跨浏览器所需的结果（您可能还应该检查以确保实际选择了文件）。例如：

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

【讨论】：

事件在 Edge 中被触发，但只有一次。第二个在任何浏览器中都不起作用

【解决方案2】：

对于 Edge 中的解决方法，

您可以尝试添加链接以添加带有控件的新行，这在包括 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>

边缘输出：

这只是为您提供的示例。此外，您可以尝试根据您的要求修改代码。

【讨论】：