将元素追加到克隆的元素

BRBT 发表于 Dev

BTBT

我有一个带有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，展示了我遇到的问题。

mplungjan

因为我真的爱你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();
});

小提琴

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

    });
});