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?

problem is the id value #column1 should be unique; change to class; — itzmukeshy7
– itzmukeshy7, Commented Apr 14, 2016 at 10:59
@itzmukeshy7 i changed to class like this $('.form-group.clone-content').on('change', '.file-upload', function () { //code }); still it is not working. — user6028593
– user6028593, Commented Apr 14, 2016 at 11:07
$(body).on('change', '#column1 .file-upload', function () { alert(this.id); }); — Deepak Dholiyan
– Deepak Dholiyan, Commented Apr 14, 2016 at 11:12
@itzmukeshy7 I tried bind like $('#column1').bind('change', '.file-upload', function () { //code });. Still i am not getting — user6028593
– user6028593, Commented Apr 14, 2016 at 11:21

itzmukeshy7 · Accepted Answer · 2016-04-14 11:14:12Z

6

Try this ;)

Track all elements

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

edited Apr 14, 2016 at 11:14

answered Apr 14, 2016 at 11:02

itzmukeshy7

2,6781 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6028593 Over a year ago

i changed to class like this $('.form-group').on('change', '.file-upload', function () { //code }); still it is not working

itzmukeshy7 Over a year ago

You need to bind on document or need to rebind the change event to newly loaded content;

Piyush Dhanotiya · Accepted Answer · 2016-04-14 11:09:56Z

0

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

answered Apr 14, 2016 at 11:09

Piyush Dhanotiya

5795 silver badges18 bronze badges

1 Comment

Deepak Dholiyan Over a year ago

This is not what he is asking

Mayron · Accepted Answer · 2016-04-14 11:35:36Z

0

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

answered Apr 14, 2016 at 11:35

Mayron

2,4436 gold badges32 silver badges57 bronze badges

Comments

awh112 · Accepted Answer · 2017-03-13 17:42:12Z

0

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.

edited Mar 13, 2017 at 17:42

awh112

1,4824 gold badges22 silver badges35 bronze badges

answered Mar 13, 2017 at 15:31

Cristobal Alcayaga

1

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related