Question

我的代码出了什么问题，好吗？我想复制表单（作为Django formset的新表单），但是一旦完成第一个副本，它只会重写最后一个表单。

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：VS Code

我需要保留原始的干净形式，因为一旦页面完全加载，表单就会混淆其他JavaScript（jQuery Autocomplete，Google Material Design Lite），这使得克隆变得更加困难，因此是不可取的。

Answer 1

在您当前的代码中，您只能从原始表单克隆一次，稍后在addForm中，您只需改变相同的克隆元素并插入它，并将相同的元素插入到同一个地方赢了有任何影响。

你应该做的是：

获取目标元素的引用。如果引用的元素也会被更改，你可以在这里克隆它，并且你想保持克隆模板的清洁，但这不是必须的。
当您致电addForm时，从该引用的目标元素克隆，更改克隆的目标元素，然后插入。

＆＃13;

$(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();
        });
    });
});

＆＃13;

<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>

＆＃13;

Answer 2

您没有保存原始表单的副本，而是创建一个保存到original_form变量的克隆。要每次都获得一个新的克隆，您需要将原始表单保存在自己的变量中，然后每次需要克隆时，请在其上调用克隆函数。你在哪里

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

只需保存$（＆＃39; .dynamic-form＆＃39;），每次需要检索克隆时，请调用克隆功能。

Answer 3

您可以使用更强大的更简单方式添加动态行：

$(document).ready(function() {       
$('.add-row').click(function() {
        var value=parseInt($('.dynamic-form input:last').val())+1;
        var newRow= '<br/><input value='+value+'>';
        $('.dynamic-form').append(newRow);
    });    
});

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

3 个答案: