使用javascript在django中生成内联表单集

我使用inlineformset_工厂生成同一模型的多个实例。我想让它充满活力。所以我有一个+按钮，当用户按下这个按钮时，将生成相同的表单。我还想保留一个用于删除的删除按钮。我已经为这项工作编写了jquery函数。但当我点击+按钮时，什么也没发生。没有形式生成

forms.py：

WorkExperienceFormset = inlineformset_factory(Employee, WorkExperience, extra=1,
                                                fields = [
                                                    'previous_company_name',
                                                    'job_designation',
                                                    'from_date',
                                                    'to_date',
                                                    'job_description',
                                                ],
                                                widgets = {
                                                        'previous_company_name': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'job_designation': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'from_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal3'}, format='%m/%d/%Y'),
                                                        'to_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal4'}, format='%m/%d/%Y'),
                                                        'job_description': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                }
                                            )

工作经验模型作为外键与员工模型相关联。 员工\工作\经验\表单.html.html：

<!-- Manage collection of forms -->
{{ work_formset.management_form }}

<!-- Handle formset errors -->
{% for work_form in work_formset %}
  {{ work_form.non_field_errors }}
  {{ work_form.errors }}
{% endfor %}

{% for work_form in work_formset %}
<div class="work-form">
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Previous Company Name</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.previous_company_name }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Designation</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.job_designation }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Details</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.job_description }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">From Date</label>
    <div class="col-md-2 col-sm-2 col-xs-12">
      <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
      <div class="form-group has-feedback">
        {{ work_form.from_date }}
        <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
      </div>
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">To Date</label>
    <div class="col-md-2 col-sm-2 col-xs-12">
      <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
      <div class="form-group has-feedback">
        {{ work_form.to_date }}
        <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

{% endfor %}

当我点击+按钮时，什么也没发生。我不知道问题出在哪里

---

我走对了吗？

欢迎来到堆栈溢出。您能否提供一些关于代码中哪些有效，哪些无效的见解，以便其他人能够提供帮助？您还可以寻找一个更好的代码审查平台，在那里可以更好地接受这些类型的问题。@Leogout我已经编辑过欢迎使用堆栈溢出。您能否提供一些关于代码中哪些有效，哪些无效的见解，以便其他人能够提供帮助？您还可以寻找一个更好的代码审查平台，在那里这些类型的问题会得到更好的回答。@Leogout我已经编辑过了

<h4>Work Experience</h4>
                <button type="button" value="add" id="add_work_experience"><i class="fa fa-plus" aria-hidden="true"></i></button>
                <div class="ln_solid"></div>
                {% include 'employee/employee_work_experience_form.html' %}

 // Add work experience
    $(document).ready(function() {
      $('#add_work_experience').click(function() {
        cloneMore('work-form', 'work_form');
      });
    });


    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;
        $(this).attr({'name': name, 'id': id}).val('').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);
}