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

ionluchian

原因导致问题，这是数字next。

删除最后一个元素，然后单击“添加”按钮

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)

Answer 2

这不是最好看的最终结果，但它的工作

$(function(){
  
    addElement(); 

});



function addElement(){
  
  $(".multiple-add-input").on('click', function(e){
    e.preventDefault();
    $(this).off('click');
    
    var next = parseInt($('.iban-input').last().attr('id'));    
   
    var addto = "#" + next + "-iban";
    next++;
    
    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 iban-input" 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" id="remove-'+ (next) +'"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
                        '</span>'+
                    '</span>'+
                '</span>';
    
    // Add element
    $(addto).parent().parent().after(newIn);
    
    // Bind removing
    $('.remove-me')
      .off('click')   
      .on('click', function(){
        removeElement($(this).attr('id'));
      });
    
    // Bind adding
    addElement();
  
  });
}


function removeElement(id){
  $('#'+id).parent().parent().parent().remove();
}

.content-panel-flat-raw-double-sub{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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 iban-input" 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动态添加字段，如果删除最后一个元素，则不再添加字段

2 个答案: