将元素附加到克隆元素

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); 

    }); 
});