javascript - 保留一份干净的 HTML 元素的副本，以便以后以正确的方式使用 jQuery 进行克隆

Question

请问我的代码有什么问题吗？我想复制该表单(作为 Django 表单集的新表单)，但是一旦第一个副本完成，它只会重写最后一个表单。

HTML:

<input id='total-forms' type='hidden' value='1'>
<div class='dynamic-form'>  
    <input value='1'>
</div>
<button class='add-row'>Add Row</button>

JavaScript:

$(document).ready(function() {
    var original_form = $('.dynamic-form').clone(true).get(0);

    function addForm() {
        var formCount = parseInt($('#total-forms').val());
        var new_form = original_form;
        $(new_form).find('input').val(formCount + 1);
        $(new_form).insertAfter($('.dynamic-form:last'));
        $('#total-forms').val(formCount + 1);
        return false;
    }

    $(function () {
        $('.add-row').click(function() {
            return addForm();
        });
    });
});

参见 jSFiddle:http://jsfiddle.net/jL6s0xzv/

我需要保持原始的干净表单，因为一旦页面完全加载，表单就会被其他 JavaScript(jQuery Autocomplete、Google Material Design Lite)搞乱，这使得克隆变得更加困难，因此是不可取的。

Answer 1

在您当前的代码中，您只从原始表单克隆一次，稍后在您的 addForm 中，您只需不断更改相同的克隆元素并插入它，并将相同的元素插入到相同的位置就不会'没有任何影响。

你应该做的是:

1. 获取目标元素的引用。如果引用的元素也将被更改，并且您希望保持克隆模板干净，则可以在此处克隆它，但这不是必须做的。

2. 当您调用 addForm 时，从引用的目标元素克隆，更改克隆的元素，然后插入。

$(document).ready(function() {
    // Get the reference as template.
    var $original_form = $('.dynamic-form');

    function addForm() {
        var formCount = parseInt($('#total-forms').val());
      
        // Clone to get a new element when we really need one.
        var $new_form = $original_form.clone(true);
        $new_form.find('input').val(formCount + 1);
        $new_form.insertAfter($('.dynamic-form:last'));
        $('#total-forms').val(formCount + 1);
        return false;
    }

    $(function () {
        $('.add-row').click(function() {
            return addForm();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='total-forms' type='hidden' value='1'>
<div class='dynamic-form'>  
    <input value='1'>
</div>
<button class='add-row'>Add Row</button>