Edge

Question

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

<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中工作并保持预期的行为？

我正在使用Jquery3.x。如果您需要其他任何信息来帮助，只需将其写在评论中即可。

谢谢。

以下是用于演示的小提琴：http://jsfiddle.net/tm643v8w/7/

Answer 1

由于某些原因，Edge似乎在选择文件时发生input事件时遇到问题（file input browser compatibility chart表明Edge可能不会连续放置文件输入元素的所有鸭子）。您可以改用change事件来在浏览器中获得所需的结果（并且您可能还应该检查以确保确实选择了文件）。例如：

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

Answer 2

要在Edge中解决，

您可以尝试添加链接以添加带有控件的新行，这在包括Edge在内的大多数浏览器中都可以使用。

 df[['UTC Time','Value 2']][df['Value 2']>2]

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

Edge中的输出：

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