将一个元素添加到一个克隆元素中

Question

将一个元素添加到一个克隆元素中

3

我有一个带有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);
        });
});

我的问题是，当我克隆包含表格和#addButton的HTML部分时，如何确保用户单击原始按钮时将克隆并附加到该表格或者如果我单击克隆的按钮，则仅将其克隆并附加到克隆的表格中？如果有任何不清楚的地方，请让我知道，这样我就可以尝试更好地解释我想要做什么，谢谢。这里是一个JSFiddle演示了我遇到的问题。

- BRBT

3

是的，如果您能在JSFiddle中复制问题，那将非常好。 - ArinCool

@ArinCool 添加了 jsfiddle。 - BRBT

@BigRabbit 如果你已经有问题链，为什么要添加新的呢？ - nirmal

@nirmal，看一下问题，你会注意到我只处理了一个表格，我只是添加了第二个表格，并且遇到了另一个问题。还请注意我删除了新问题？;) 谢谢你的光临。 - BRBT

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

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

    });
});