javascript - Duplicate DOM node jQuery(未引用)

Question

我正在开发一个动态表单，我需要复制一个节点并将其插入到另一个 DOM 位置。

我的问题是，当我第一次复制节点(其中包含空输入)时，我用数据填充它，然后再次复制它，它被复制了所有数据。

我想复制包含空 DOM 节点的变量而不是引用它。

这可能吗？

var emptySegment = $( '#segment' ).clone();

$(document ).on('click', '#add', function(){
    var emptySgmt = emptySegment; // Duplicate emptySegment. 
    emptySgmt.insertAfter( '.lastSegment' );
});

谢谢

Answer 1

克隆元素后，您需要将 input(或任何其他元素)重置回您需要的状态。试试这个:

$(document).on('click', '#add', function() {
    cloneSegment().insertAfter('.lastSegment');
});

function cloneSegment() {
    return $('#segment').clone().find('input').val('').end();
}

请注意，此示例只是重置段中所有 input 元素的 value。您可以将自己的逻辑放入其中以满足您的任何特定要求。