在< input type =" file">上无法识别输入事件在边缘 [英] Input event not recognised on <input type="file"> in Edge

问题描述

我有一个动态生成Formular，包括一些输入字段。

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.

有人可以告诉我，为什么它在我测试的每个浏览器中都有效，但在Edge中却没有？我如何更改事件监听器以使其在Edge中工作并保持预期的行为？

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?

我正在使用Jquery 3.x.如果您需要任何进一步的信息来帮助，请在评论中写下。

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

提前致谢。

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

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

推荐答案

出于某种原因，Edge似乎在文件中遇到了输入事件的问题选择（文件输入浏览器兼容性图表建议Edge可能没有连续的文件输入元素的所有鸭子）。您可以使用更改事件来获取跨浏览器所需的结果（您也应该检查以确保实际选择了文件）。例如：

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

这篇关于在< input type =" file">上无法识别输入事件在边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！