將元素附加到克隆元素

Question

我有一個HTML表格，其中有一個按鈕(#addRows)，當單擊該按鈕時，將克隆第一個表格行並將其附加到表格的底部。

該表位於HTML的一部分，其他一些輸入字段也可以克隆並附加到表單的底部。當我克隆該部分時，我將更改所有子元素ID以包含一個可以迭代的數字，具體取決於用戶克隆該部分的次數。

例

<div id="someID"> ... </div> 
<div id="someID2"> ... </div> 
<div id="someID3"> ... </div> 

我用jQuery做這個像這樣

$(function() {  
    var $section = $("#facility_section_info").clone(); 
    var $cloneID = 1; 
    $(".addSection").click(function() { 
     var $sectionClone = $section.clone(true).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + $cloneID); }); 
     $('#facility_section_info').append($sectionClone); 
     $cloneID++; 
    }); 
}); 

當我克隆持有的表，我也克隆#addRows按鈕，點擊它應該追加一個表時的部分行被點擊在桌子上。但是，如果我克隆我的部分，然後單擊我的第二​​個`#addRows按鈕，它將克隆我的表格行，但它附加到我的第一個表格，而不是第二個表格。

這是我addRows按鈕和事件處理

<input type="button" value="+" id="addRows" class="addRows"/> 

$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $("#row0").clone(); 
     $idVal = 1; 
     $(document).on('click', '.addRows', function(){ 
      var copy = $firstTRCopy.clone(true); 
      var newId = 'row' +$idVal; 
      copy.attr('id', newId); 
      $idVal += 1; 
      copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>"); 
      $componentTB.append(copy); 
     }); 
}); 

我的問題是，當我克隆我的HTML保存我的桌子和#addButton的部分我怎麼能確保當用戶點擊原有的按鈕，它將克隆並追加到該表或如果我點擊克隆按鈕它將克隆並追加到克隆表只？

如果有什麼不清楚的，請讓我知道，以便我可以嘗試更好地解釋我正在嘗試做什麼，謝謝。

這是一個JSFiddle展示我遇到的問題。

Answer 1

因爲我真的愛你BigRabbit，所以我就到了這裏。你會看到這裏至少一個有用的解決辦法：

var $sectionClone = $section.clone(true); 
    $sectionClone.find("*[id]").andSelf().each(function() { 
     $(this).attr("id", $(this).attr("id") + $cloneID); 
    }); 

，併爲問題的解決辦法，你沒有使用報告尚未

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>'); 

$("#facility_section_info").on('click', '.remove', function (e) { 
    e.preventDefault(); 
    $("#"+$(this).data("removeid")).remove(); 
}); 

FIDDLE

$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $("#row0").clone(), 
     $section = $("#facility_section_info>fieldset").clone(), 
     $cloneID = 0, 
     $idVal = 0; 

    $("#facility_section_info").on('click', '.remove', function (e) { 
     e.preventDefault(); 
     $("#"+$(this).data("removeid")).remove(); 
    }); 

    $("#facility_section_info").on('click', '.addRows', function() { 
     $idVal++; 
     var $copy = $firstTRCopy.clone(true); 
     var newId = 'row' + $idVal; 
     $copy.attr('id', newId); 
     $copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>'); 
     $(this).closest("fieldset").find("tbody").append($copy); 
    }); 

    $("#facility_section_info").on("click", ".addSection", function() { 
     $cloneID++; 
     var $sectionClone = $section.clone(true); 
     $sectionClone.find("*[id]").andSelf().each(function() { 
      $(this).attr("id", $(this).attr("id") + $cloneID); 
     }); 
     $('#facility_section_info').append($sectionClone); 

    }); 
});