用于在Django表单集中添加/删除表单的Javascript

Question

从@Paolo Bergantino回答这个先前的SO问题开始 ，我一直在尝试将表单动态添加到我的表单集中。 但是，新添加的表单似乎以某种方式“链接”到了前一个表单。 因此，单击新表单上的复选框会影响旧表单。 此外，提交后，帖子中仅显示一种形式。 所有其他新添加的组件发生了什么？

addAnother.js

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;

        if ($(this).attr('type') != 'hidden') {
            $(this).val('');
        }
        $(this).attr({'name': name, 'id': id}).removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

template.html

{% load crispy_forms_tags %}
<script src="{{ STATIC_URL }}js/addAnother.js" type="text/javascript"></script>
<form action="{% url 'databank:register' %}" method="post" enctype="multipart/form-data">

<div class="container">
    <div class="row" style="margin-top: 30px"> 
      <div class="col-md-10 col-md-offset-1">
        {{ dataset_form.media }}
        {% crispy dataset_form %}
        {% crispy facility_form %}
        {% crispy contact_form %}

        {{ author_formset.management_form }}
        {% for form in author_formset.forms %}
        <div class='table'>
          <table class='no_error'>
          {{ form.as_table }}
          </table>
        </div>
        {% endfor %}
        <input type="button" value="Add More" id="add_more">

        {% crispy terms_form %}

      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <a role="button" class="btn btn-lg btn-default" href="{% url 'databank:databank_home' %}">Cancel</a>
        <input type="submit" class="btn btn-lg btn-success pull-right" value="Proceed to Data Upload">
      </div>
    </div>
  </div>
</form>



<script type="text/javascript">
    $('#add_more').click(function() {
        cloneMore('div.table:last', 'service');
    });

Answer 1

感谢django-users组中的Bill，我能够使用django-dynamic-formset来完成这项工作