jQuery .on('change') is not working for dynamically added file inputs

Question

I have got a page with the following structure

<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>

and I've written some jQuery:

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

so when I enter an element into the file it generates a div under the previous one:

<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>

But now, despite the event being registered using .on() the second file input in the div does not fire the event. What am I missing?

Answer 1

Try this ;)

Track all elements

$(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

You need to reuse / re-attach the on change event handler function straight after the new div is added as a child to the column1 div, because like you said jQuery does not work dynamically. Once it has scanned and found all elements, it will not recheck unless you do so manually.

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

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

Answer 4

Use :

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

or

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

To call te action of change in any input type file

Depend by the version if you Jquery.