javascript - jQuery .on ('change' ) 不适用于动态添加的文件输入

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>

但是现在，尽管事件是使用 .on() 注册的，但 div 中的第二个文件输入不会触发该事件。我错过了什么？

Answer 1

试试这个 ;)

跟踪所有元素

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