添加jquery后HTML提交按钮不起作用

Question

Html 提交按钮在添加 jquery 脚本之前工作正常。但是当我在用户学术信息中添加 jquery 脚本时，html 提交按钮不起作用。这个模板在 django 中确实有效。我在 id="form_set" 中添加了 jquery 当我还在 id="empty_form" 提交按钮中添加 style="display:none"不工作

这里是html代码：

{% extends 'base/base.html' %} {% load static %} {% block content %}
<div class="card">
    <form class="form-horizontal" action="/" method="post">
        {% csrf_token %}
        <div class="card-header">
            <strong class="icon-user"> User Basic Information</strong>
            <hr class="divider" />
        </div>

        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_basic_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>Select Employ Designation:</h6></label>
                    {% for field in user_role %}
                    <div class="col-md-9">{{ field }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-book"> User Academic Information</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="card-body">
                <div class="form-horizontal">
                    {{ employAcademicFormSet.management_form }}
                    <div id="form_set">
                        {% for form in employAcademicFormSet %} {% for field in form.visible_fields %}
                        <table class="no_error">
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                                <div class="col-md-9">{{ field }}</div>
                            </div>
                        </table>

                        {% endfor %} {% endfor %}
                    </div>
                    <input type="button" value="Add More" id="add_more" />
                    <div id="empty_form" style="display: none;">
                        {% for form in employAcademicFormSet %} {% for field in form.visible_fields %}
                        <table class="no_error">
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                                <div class="col-md-9">{{ field }}</div>
                            </div>
                        </table>
                        {% endfor %} {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-home"> User Home Information</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_address_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-key"> Employ User Password</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_password_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %} {% if errors %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"></label>
                    <div class="col-md-9 text-danger">* {{ errors }}</div>
                </div>
                {% endif %}
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-lg btn-primary" type="submit">Submit</button>
        </div>
        <script>
            $("#add_more").click(function () {
                var form_idx = $("#id_form-TOTAL_FORMS").val();
                $("#form_set").append(
                    $("#empty_form")
                        .html()
                        .replace(/__prefix__/g, form_idx)
                );
                $("#id_form-TOTAL_FORMS").val(parseInt(form_idx) + 1);
            });
        </script>
    </form>
</div>
{% endblock %}

为什么会出现这个问题？请帮我解决问题

Answer 1

我确实解决了这个问题。如果我确实从 <div id="empty_form" style="display: none;"> 中删除 style="display: none;" 或者只是将 <div> 更改为 <tbody> 那么问题就解决了......