JQuery .он («изменение») не работает для динамически добавленных входных файлов

Question

Я получил страницу со следующей структурой

<div class="form-group" id="column1"> 
    <div class="col-sm-16 inputs" id="inputdiv0"> 
     <label class="control-label col-sm-3" for="fileupload1"> 
      Add Video 
     </label> 
     <div class="col-sm-7"> 
      <div data-provides="fileinput" class="fileinput fileinput-new input-group"> 
       <div data-trigger="fileinput" class="form-control"> 
        <i class="glyphicon glyphicon-file fileinput-exists"></i> 
        <span class="fileinput-filename"></span> 
       </div> 
       <span class="input-group-addon btn btn-default btn-file"> 
        <span class="fileinput-new">Select file</span> 
        <span class="fileinput-exists">Change</span> 
        <?= $this->Form->file('file',['class' => 'file-upload','name'=>'file[]','id'=>'file0','accept'=>'.aov,.wmv,.avi,.flv,.vob,.mov,.qt,.m4v,.mpg,video/*','required' => true]); ?> 
       </span> 
       <a data-dismiss="fileinput" class="input-group-addon btn btn-default fileinput-exists" href="#">Remove</a> 
      </div> 
     </div> 
     <div class="col-sm-1"> 
      <button class="btn btn-success" type="button" id="add"><i class="fa fa-plus"></i></button> 
     </div> 
    </div> 
</div> 

и я написал несколько JQuery:

$('div #column1').on('change', '.file-upload', function() { 
      alert(this.id); 
     }); 

поэтому, когда я вхожу элемент в файл он генерирует DIV под предыдущим:

<div id="column1" class="form-group"> 
    <div id="inputdiv0" class="col-sm-16 inputs"> 
     <label for="fileupload1" class="control-label col-sm-3"> 
      Add Video 
     </label> 
     <div class="col-sm-7"> 
      <div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
       <div class="form-control" data-trigger="fileinput"> 
        <i class="glyphicon glyphicon-file fileinput-exists"></i> 
        <span class="fileinput-filename"></span> 
       </div> 
       <span class="input-group-addon btn btn-default btn-file"> 
        <span class="fileinput-new">Select file</span> 
        <span class="fileinput-exists">Change</span> 
        <input type="file" required="required" accept="video/*" id="file0" class="file-upload" name="file[]" aria-required="true">          </span> 
       <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
      </div> 
     </div> 
     <div class="col-sm-1"> 
      <button id="add" type="button" class="btn btn-success"><i class="fa fa-plus"></i></button> 
     </div> 
    </div> 
    <div id="inputdiv1" class="col-sm-16 inputs"> 
      <label for="fileupload1" class="control-label col-sm-3"> 
       Add Video 
      </label> 
      <div class="col-sm-7"> 
       <div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
        <div class="form-control" data-trigger="fileinput"> 
         <i class="glyphicon glyphicon-file fileinput-exists"></i> 
         <span class="fileinput-filename"></span> 
        </div> 
        <span class="input-group-addon btn btn-default btn-file"> 
         <span class="fileinput-new">Select file</span> 
         <span class="fileinput-exists">Change</span> 
         <input type="file" required="required" accept="video/*" id="file1" class="file-upload" name="file[1]" aria-required="true" style="outline: medium none;">          </span> 
        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
       </div> 
      </div> 
      <div class="col-sm-1"> 
       <button id="remove" type="button" class="btn btn-success"><i class="fa fa-minus"></i></button> 
      </div> 
     </div> 
</div> 

Но сейчас, несмотря на событии registere d с использованием .on() второй вход файла в div не запускает событие. Что мне не хватает?

Answer 1

Попробуйте это;)

отслеживать все элементы

$(document).on('change', '.file-upload', function() { 
    alert(this.id); 
}); 

Answer 2

$('select').change(function(){ 
 
alert('ok'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="select1"> 
 
<option>select1</option> 
 
    <option>selec2</option> 
 
    <option>selec3</option> 
 
</select>

Answer 3

Вам нужно повторно/повторно прикрепить на функции обработчика события изменения сразу после нового DIV добавляется как дочерний элемент в div column1, потому что, как вы сказали, jQuery не работает динамически. Как только он сканирует и находит все элементы, он не будет перепроверять, если вы не сделаете это вручную.

function onChange() { 
    alert(this.id); 
    $('#column1').on('change', '.file-upload', onChange); 
} 

$('#column1').on('change', '.file-upload', onChange); 

Answer 4

Использование:

$("body").on('change', 'input[type="file"]', function() { 
....... 
-..... 
}); 

или

$('input[type="file"]').change(function(){ 
......... 
}); 

Для вызова тэ действие изменения в любой входной тип файла

dépend версией, если вы Jquery.