jquery - 组合两个功能，同时它们单独运行

Question

是否可以将以下两个功能组合起来，同时保持它们分开？

cloneMe函数克隆一组字段并给它们新的名称和 ID，因此使用 foreach 我可以将每个组作为单独的行放入数据库中。

addRow函数将 2 个字段(“支撑”和“数量”)添加到克隆组，可以添加无限数量的这些字段，但它们需要被视为 cloneMe 创建的克隆组的一部分所以我可以将这两个字段放入它们自己的单独的数据库表中。

到目前为止，我已经尝试过一切来获取 addRow的生成字段被视为 cloneMe 的一部分组产生了 addRow字段被视为空，并且只有第一个字段是第一组的一部分，并且无法向第二组或其他组添加任何内容。

我已将所有内容放入 jsFiddle:http://jsfiddle.net/AnJzU/虽然addRow似乎不想在那里工作。

cloneMe函数；

$(document).ready(function() {
    var newNum = 2;
    cloneMe = function(el) {
        var newElem = el.clone().attr('id', 'container' + newNum);
        newElem.html(newElem.html().replace(/form\[1\]/g, 'form['+newNum+']'));
        newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+newNum+'"'));
        $('#cloneb').before(newElem);
        newElem.find('.delete_name').html('<p class="rem_field"><a href="#"><span>X</span></a></p>');
        newNum++;
    };

    $(document).on('click', '.rem_field', function() {
        $(this).closest('.instance').remove();
        return false;
    });    

});

addRow函数；

var rowNum = 0;
function addRow(frm) {
   rowNum ++;
   var row = '<span id="rowNum'+rowNum+'"><table cellpadding="0" cellspacing="0" border="0"><tr><td><label for="test">Bracing:</label><input type="text" name="form['+rowNum+'][brac]['+rowNum+'][bracing]" size="4" class="brac" value=""></td><td><label for="test2">Qty:</label><input type="text" name="form['+rowNum+'][brac]['+rowNum+'][qty]" class="qty" value=""></td><td><input type="button" class="rem" value="X" onclick="removeRow('+rowNum+');"></td></tr></table></span>';
   jQuery('#itemRows').append(row);
}

function removeRow(rnum) {
  jQuery('#rowNum'+rnum).remove();
}

Answer 1

您的cloneMe代码始终克隆ID为“container1”的隐藏表单模板。如果您希望在添加额外的支撑和数量行后克隆表单，则需要将适当的元素传递给cloneMe 函数。由于第一个容器的 id 为“container”而不是“container1”，因此您的cloneMe 调用需要是:

cloneMe($('#container'))

当然，这不是动态的。这将始终克隆顶部容器。如果您想克隆列表中的最新容器(这似乎正是您的意图)，您将需要“更多详细信息”按钮，使其更加动态，如下所示:

<input type="button" id="cloneb" value="More Details" onclick="cloneMe($('#container' + (newNum - 1)));" />

这将始终克隆当前 newNum 变量之前的数字。您可能应该取消“container1”隐藏模板，并将您的第一个容器称为“container1”。否则，onclick 更改将不起作用，因为它仍然会克隆您的隐藏容器，而不是您添加新行的第一个容器。