Question

我可以使用添加按钮克隆#ingredient_1 div。但是，在多次按添加，然后使用特定的 X 按钮删除随机克隆的div后，添加按钮停止工作

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

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

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

3 个答案: