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

例如，我有一个叫做学生的部分

我允许用户动态添加学生

每个学生都有字段名称、点和图像

名称和点起作用。当我添加图像字段时，问题就出现了

请参阅上面的附件，当我尝试从第二个学生选择文件时，图像值将转到第一个学生

是指第一个学生吗 是指第二个学生吗

文件输入的id是正确的

注意：我正在使用复制div

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

源代码

来自firebug的html

---

最终解决了这个问题，我才意识到文件输入正在使用

---

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

给我们看一些代码。可能你使用的是相同的id或其他东西。请发布相关代码，以便我们指出错误。我添加了源代码。attr'name'，students_image['+count+']'变成.attr'name'，students_image['+next_id+']？@NathanP。计数从0开始，其中as next_id从1开始。属性名称为“从0开始”。下面的代码较短，并且一直为我解决相同的问题；$”userfile'.filestyle'clear'；$'userfile'.filestyle'destroy'；$'userfile'.filestyle；

$('#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);
});

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

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