重复 DOM 节点 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。您可以将自己的逻辑放入其中以满足您的具体要求。

Answer 2

var emptySegment = $( '#segment' ).clone(); // Provided this is empty

  $(document ).on('click', '#add', function(){
  var emptySgmt = emptySegment.clone(); // clone it again to get prisitine copy each time
  emptySgmt.insertAfter( '.lastSegment' );
});

重复 DOM 节点 jQuery （未引用）

Duplicate DOM node jQuery (not reference)

javascript

jquery

dom

clone