Входное событие не распознанов краю - PullRequest
Новая
       22

Входное событие не распознанов краю

0 голосов
/ 19 сентября 2018

У меня есть сборка динамического генерирования Formular, включая некоторые поля ввода.

<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.Если вам нужна дополнительная информация, чтобы помочь, просто запишите ее в комментариях.

Заранее спасибо.

Вот скрипка для демонстрации: http://jsfiddle.net/tm643v8w/7/

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Для обхода в 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>

Выход в Edge:

enter image description here

Это только пример для примеравы.Далее вы можете попытаться изменить код в соответствии с вашими требованиями.

0 голосов
/ 19 сентября 2018

По какой-то причине Edge, похоже, испытывает проблемы с событием input при выборе файла ( таблица совместимости браузера с файловым вводом предполагает, что Edge может не иметь всех своих уток подряд для элементов ввода файла).Вместо этого вы можете использовать событие change, чтобы получить нужные вам результаты в разных браузерах (и вам, вероятно, также следует убедиться, что файл действительно выбран).Например: 

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