javascript - Jquery动态添加字段，如果删除最后一个元素，则不再添加字段

Question

我与jquery有冲突，找不到正确的解决方案，每次出现问题时，我都会有一个表单，动态添加一个输入和一个选择，默认情况下，html表单有一个输入和一个选择，并在添加新字段后(如果需要)。

问题是字段是用 jquery 动态添加的，也可以删除，但是如果您添加一些新字段并仅删除最后一个字段，则表单将不再工作，无法添加新字段，但如果你从中间删除一个字段，那就没问题了。

如果您删除最后一个元素才能再次添加新字段，我需要修复。

请参阅下面的示例。

HTML

        <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
            <span class="multiple-field-container-add">
                <span class="content-panel-flat-raw-double-sub">
                    <span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
                        <label>IBAN</label>
                        <input class="form-control" id="0-iban" name="0-iban" type="text" value="">
                    </span>
                    <span class="content-panel-flat-raw-double-sub-raw">
                        <span class="content-panel-flat-raw-double-sub-raw-double-raw">
                            <label>Currency</label>
                            <select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
                        </span>
                        <span class="content-panel-flat-raw-double-sub-raw-double-raw">
                            <a href="#" class="btn bg-teal-400 btn-labeled btn-custom-width multiple-add-input"><b><i class="icon-plus2"></i></b> Add new</a>
                        </span>
                    </span>
                </span>
            </span>
        </form>

Jquery

var next = 1;
$(".multiple-add-input").click(function(e){
    e.preventDefault();

    var addto = "#" + next + "-iban";

    next = next + 1;
    var newIn = '<span class="content-panel-flat-raw-double-sub">'+
                    '<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
                       '<label>IBAN</label>'+
                        '<input class="form-control" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
                        '<div class="form-control-feedback">'+
                            '<i class="icon-font-size"></i>'+
                        '</div>'+
                    '</span>'+
                    '<span class="content-panel-flat-raw-double-sub-raw">'+
                        '<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
                            '<label>Currency</label>'+
                            '<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
                                    '<option value="EUR">EUR</option>'+
                                    '<option value="USD">USD</option>'+
                            '</select>'+
                        '</span>'+
                        '<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
                            '<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" onclick="_multiple_field_remove_('+ (next) +')"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
                        '</span>'+
                    '</span>'+
                '</span>';

    alert(next);
    var newInput = $(newIn);

    $(addto).parent().parent().after(newInput);

    $('.select').select2();

    _multiple_field_remove_ = function(id){            
        alert(id);
           $('#'+ id +'-iban').parents('span.content-panel-flat-raw-double-sub').remove();                
};

Answer 1

ionic 卢奇安

导致问题的原因，是下一个的数字。

当您删除最后一个元素并单击下一步添加按钮时，

var addto = "#" + next + "-iban";
...
// can't find item 'addto',so it's not work
$(addto).parent().parent().after(newInput);

此代码根本无法找到最后一项。

请改用上面的内容:

change: $(addto).parent().parent().after(newInput);

to    : $('.multiple-field-container-add').append(newInput)