Question

我有一个项目的一部分我正在努力，我必须添加相同div的重复实例。然而，它主要是有效的，而不是添加单个实例，之前添加的div似乎是重复自己，而不是拥有＆＃34;原始div＆＃34;加入。

以下是jsfiddle以及我目前使用的代码：

 <div class="shape" id="plan4_shape">
         <span class="bakkant">
         <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w1"/>
         <span class="times"> &times;</span>
         <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l1" />
         </span>
          <script id="template" type="text/template">
             <span class="bakkant" id="bakkant">
             <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w"/>
             <span class="times"> &times;</span>
             <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l" />
             <button class="close" id="close">&times;</button>
             </span>
            </script>
            <button type="button" name="add_row" class="addrow" id="addrow4" onClick="addrow()">Add row</button>
            <textarea name="more_info" id="profiles" placeholder="Beskriv fritt, vilka kanter du vill få profilerade."></textarea>
</div>

jQuery代码

$(function() {
  var i = 0;
  $('#addrow4').click(function() {
    var $clone = $($('#template').html());
    $clone.attr('id', "bakkant" + ++i);
     $clone.find('p').attr("Bob" + ++i)
    $clone.find('input').attr('value', "l" + ++i);
    $clone.find('input').attr('value', "w" + ++i);
    $('.bakkant').append($clone);
  });

  $('.shape').on('click', '.close', function() {
    $(this).closest('.bakkant').remove();
  });
});

Answer 1

当您需要在最后添加新行时，您需要执行

 $('.bakkant').last().append($clone);

您无需++i更改每个id或value属性，只需为每个事件增加一次。

工作小提琴here。

一次添加一个div，或删除重复字段

1 个答案: