0

jQuery を介して動的に行を追加しようとしていますが、1 行を追加する代わりに、一度に 2 行を追加します。

コードは次のとおりです。

jQuery コード:

$(document).ready(function() {
  var current_id = 1;
  $('#add').click(function(){
  next_element($('#timesheetrow1'));
 })

 function next_element(element){
 var new_element = element.clone(),
    id = current_id + 1;
    current_id = id;

if (id <7) {
    new_element.attr("id",element.attr("id").split("1")[0]+id);

    $(':input', new_element).each(function(){
      var field_id = $(this).attr("id"),
          field_name = $(this).attr("name");
      $(this).attr("id", field_id.split("1")[0]+id );
      $(this).attr("name", field_name.split("1")[0]+id );
    });
    new_element.appendTo($("#timesheet-rows"));
  }
   };
 });

そしてHTMLコード：

<div id="timesheet-rows">
    <div id="timesheetrow1" class="timesheet-row">

    <input type="text" id="FinalNumber1" name="FinalPONumber1" width="50" />                                         
    <input type="text" id="FinalAmount1" name="FinalPOAmount1" width="50" />                                           
   </div>

   </div>
  <input type="button" value="Add" class="add" id="add" class="GreenBTN"/>
4

1 に答える 1

0

jQuery clone メソッドは、指定された要素のディープ コピーを作成します。複製と追加により、線形ではなく指数関数的な成長が得られます。つまり、最初に 1 つ追加するときは問題ありませんが、2 回目は元の要素と追加した子要素をコピーするので、1 ではなく 2 を追加します。次回はコピーします。オリジナルとその 3 つの子を追加し、1 の代わりに 4 を追加します。

この問題を回避する 1 つの方法は、 jQuery の代わりにJavaScript のcloneNodecloneを使用することです。これにより、深いクローンまたは浅いクローンにするオプションが提供されます。

next_element(document.getElementById("timesheetrow1"));

var new_element = element.cloneNode(false);
于 2013-10-01T16:52:34.657 に答える