javascript - HTML 动态添加文件输入不起作用

Question

例如，我有一个名为 students 的部分

我允许用户动态添加学生

每个学生都有字段姓名、分数和图片

姓名 和积分 有效。当我添加 Image 字段

时，问题就来了

见上面的附件，当我尝试从第二个学生那里选择文件时，图像值转到了第一个学生。

<label for="student-image-1">指向第一个学生
<label for="student-image-2">是指向第二个学生

并且文件输入的id是正确的。

注意:我使用的是 jQuery.clone复制 div

知道为什么我选择第二个输入会填充到第一个吗？

源代码

$('#student-add-more').click(function(e) {

    e.preventDefault();

    var count = $('div[id^=student-row-]').length;
    var last = $('div[id^=student-row-]').last();
    var $clone = last.clone(true);

    var next_id = count + 1;

    $clone.attr('id', 'student-row-' + next_id);

    $clone.find('.image-label')
        .attr('for', 'student-image-' + next_id)
    ;
    var fileinput = $clone.find('.filestyle')
        .attr('id', 'student-image-' + next_id)
        .attr('name', 'students_image['+count+']')
    ;

    fileinput.wrap('<form>').closest('form').get(0).reset();
    fileinput.unwrap();
    $clone.find('.bootstrap-filestyle > label.btn')
        .attr('for', 'student-image-' + next_id)
    ;
    $clone.find('.bootstrap-filestyle > input').val('');

    var delete_button = $clone.find('.btn-danger')
        .attr('data-url', 'student-row-' + next_id)
        .attr('href','#deleteModal')
        .attr('class', 'btn btn-danger btn-sm btn-delete')
    ;
    delete_button.closest('.form-group').removeAttr('style');

    $clone.show().insertAfter(last);
});

来自 Firebug 的 html

<div id="student-row-1">
    <div class="form-group ">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <span class="badge bg-info student-no">1</span>
            <div class="clearfix visible-xs"></div>
            <label class="student-label" for="student-1">Name</label>                                            <em class="red">*</em>
        </div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <input type="text" value="" name="students[0][title]" class="form-control title-control" id="title-1">                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <label class="point-label" for="point-1">Points</label>                                            <em class="red">*</em>
         </div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <input type="text" value="" name="students[0][point]" class="form-control point-control" id="point-1">                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <label class="image-label" for="student-image-1">Image</label>                                            <em class="red">*</em>
        </div>
        <div class="col-lg-6 col-md-8 col-sm-8">
            <input type="file" name="students_image[0]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-1" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-1"><span>Choose file</span></label></div>                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <a title="Delete" data-toggle="modal" href="#" class="btn btn-danger btn-sm hidden" data-url="student-row-1">Delete</a>
        </div>
    </div>
</div>
<div id="student-row-2" style="display: block;">
    <div class="form-group ">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <span class="badge bg-info student-no">2</span>
            <div class="clearfix visible-xs"></div>
            <label class="student-label" for="student-1">Name</label>                                            <em class="red">*</em>
        </div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <input type="text" value="" name="students[1][title]" class="form-control title-control" id="title-2">                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <label class="point-label" for="point-1">Points</label>                                            <em class="red">*</em>
         </div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <input type="text" value="" name="students[1][point]" class="form-control point-control" id="point-2">                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label">
            <label class="image-label" for="student-image-2">Image</label>                                            <em class="red">*</em>
        </div>
        <div class="col-lg-6 col-md-8 col-sm-8">
            <input type="file" name="students_image[1]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-2" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-2"><span>Choose file</span></label></div>                                        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
        <div class="col-lg-6 col-md-7 col-sm-7">
            <a title="Delete" data-toggle="modal" href="#deleteModal" class="btn btn-danger btn-sm btn-delete" data-url="student-row-2">Delete</a>
        </div>
    </div>
</div>

Answer 1

终于解决了问题，才发现文件输入使用的是Bootstrap Filestyle .

// file
var file_container = $clone.find('.filestyle').parent();
file_container.empty();
var fileinput = $('<input>').addClass('filestyle').attr({
    id: 'student-image-'+next_id,
    name: 'students_image['+count+']',
    type: 'file',
});
file_container.append(fileinput);
fileinput.filestyle({
    icon: 'false',
    classButton: 'btn btn-default',
    classInput: 'form-control inline input-s',
});
var file_label_container = file_container.prev();
var new_label = $('<label>').addClass('image-label').attr('for', 'student-image-'+next_id).text(file_label_container.find('label').text());
file_label_container.find('label').remove();
file_label_container.prepend(new_label);

我删除了原始输入，并重新创建了一个普通输入，然后使用文件样式来设置文件输入的样式并附加到容器中。以及左侧的标签。