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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你需要在将new div作为子节点添加到column1 div之后直接重用/重新附加on change事件处理函数，因为正如你所说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(){
.........
});

在任何输入类型文件中调用更改操作

依赖于Jquery的版本。

jQuery .on（'change'）不适用于动态添加的文件输入

4 个答案: