Как отследить событие change всех input'ов?

172
05 июля 2018, 02:10

У меня есть форма вида:

<form type="multipart/form-data">
    <input type="file" name="text">
</form>

Нужно, что бы при выборе пользователем одного файла, подгружалось новое поле для загрузки еще одного файла. Проблема в том, что с данным кодом событие change отслеживается только на первом input формы. То есть новые поля формы добавляются на страницу только в том случае, если изменять 1ый input.

var inputs = $('#formId :input');
$('#formId :input').change(function () {
    if (fileInputs.length < 4) {
        var content = '<input type="file" name="text' +
        (fileInputs.length + 1) + '">';
        $('#formId').append(content);
    }
Answer 1

$('#formId').on("change", 'input[type="file"]', function () { 
  var fileInputs = $('#formId input[type="file"]'); 
  if (fileInputs.length < 4) { 
    var content = '<input type="file" name="text' +  (fileInputs.length + 1) + '">'; 
    $('#formId').append(content); 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="formId" type="multipart/form-data"> 
    <input type="file" name="text"> 
</form>

Тут дело в делегировании при назначении обработчика события change. В коде ответа, обработчик назначается элементу #formId, с указанием, что выполнять его надо для событий, которые произошли на элементах input[type="file"]. В таком случае не важно, существуют эти инпуты в момент назначения обработчика или будут созданы позднее.

READ ALSO
Как реализовать событие при клике на одном из элементов с одинаковыми классами

Как реализовать событие при клике на одном из элементов с одинаковыми классами

Имеется несколько div c class='card'как реализовать в js, чтобы при нажатии на одном из элементов происходило событие какое-либо? Вот ниже моя реализация...

184
Как сделать синхронизацию двух полей select?

Как сделать синхронизацию двух полей select?

Имеется два поля select c 4 опциями в каждом

201
сравнение элементов массивов на js

сравнение элементов массивов на js

Хочу на js сравнить два массива и выстроить select и выделить все option которые соответсвуют условиюВот код:

152
Проблемка с модальным окном

Проблемка с модальным окном

Вот есть такое модальное окно:

197