“添加”按钮在删除行后停止工作

Question

我可以使用添加按钮来克隆#ingredient_1div按钮。然而，在按下加几次后，删除随机克隆的div s与其特定的x按钮，加按钮停止工作。

我已经在几个浏览器中复制了这个问题。任何建议都会有很长的路要走。

$('#add_more').click(function() { 
 
    var num = $('.clone').length; 
 

 
    var newNum = num + 1; 
 

 
    var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum); 
 

 
    $('#ingredient_' + num).after(newElem); 
 
}); 
 

 
$('#main').on('click', '.remove', function() { 
 
    $(this).parent().remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="ingredient_1" class="clone"> 
 
    <select id="1"> 
 
     <option selected="selected">Please Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
    </select> 
 
    <input type="text" name="name" placeholder="Amount" /> 
 
    <select id="2"> 
 
     <option selected="selected">Units</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
    </select> 
 
    <select id="3"> 
 
     <option selected="selected">Time</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
     <option value="">Select</option> 
 
    </select> 
 
    <button class="remove">X</button> 
 
    </div> 
 
    <div id="add_button"> 
 
    <input type="button" id="add_more" value="Add" /> 
 
    </div> 
 
</div>

Answer 1

一旦删除第一行你克隆元素不再存在。克隆元素的点击功能之外，所以它不会被覆盖：

var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum); 
var num = 1; 

$('#add_more').click(function() { ... }); 

此外，声明之外的功能您的ID增量器，只是每次点击功能与num++运行时加1。我猜测ID值是什么并不重要，只要它们是独一无二的就行了。

Answer 2

问题是，您正在使用.length来计算newNum。如果您在中间删除DIV，则最终会出现重复的ID。例如，假设您首先添加3个DIV，您将拥有编号为1,2,3,4的DIV。然后删除＃3。当您下次点击Add时，$(".clone").length将为3，因此您将设置为newNum = 4;。但是还有一个具有该ID的DIV。

代替使用$(".clone").length，得到$(".clone:last")的ID，得到它的末尾的数字，然后加1。

Answer 3

你在克隆，如果你至少有一个静态项目，那就很好。我修正了你的代码，所以你的第一行是隐藏的，并且你有一个自动递增的ID变量。最重要的是，它在创建克隆时创建第一行。您的后端代码只需忽略样式设置为display:none的情况。

var id = 1; 
$(function() { 
    var first = $('.clone'); 
    first.attr('style', 'display:none'); 
    NewRow(); 
}); 

$('#add_more').click(function() { 
    NewRow(); 
}); 

function NewRow() { 
    console.log('num = ' + id++); 

    var newElem = $('.clone:last').clone().attr('id', 'ingredient' + '_' + id + '_x'); 
    newElem.attr('style', ''); 
    $('.clone:last').after(newElem); 
} 

$('#main').on('click', '.remove', function() { 
    $(this).parent().remove(); 
}); 

你会注意到，我改变了你的点击事件来调用函数NewRow()，这样做的目的，这样就可以在Document.Ready事件调用的函数，以及按钮上点击。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="main"> 
    <div id="ingredient_1" class="clone"> 
     <select id="1"> 
      <option selected="selected">Please Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
     </select> 
     <input type="text" name="name" placeholder="Amount" /> 
     <select id="2"> 
      <option selected="selected">Units</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
     </select> 
     <select id="3"> 
      <option selected="selected">Time</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
      <option value="">Select</option> 
     </select> 
     <button class="remove">X</button> 
    </div> 
    <div id="add_button"> 
     <input type="button" id="add_more" value="Add" /> 
    </div> 
</div> 

工作的jsfiddle是here