javascript - "Add"删除行后按钮停止工作

Question

我可以使用 Add 按钮克隆 #ingredient_1 div。然而，在多次按下 Add，然后使用特定的 X 按钮删除随机克隆的 div 之后，Add按钮停止工作。

我已经在多个浏览器中重现了这个问题。任何建议都会大有帮助。

$('#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 值是什么并不重要，只要它们是唯一的就可以。