javascript - 添加jquery后Html提交按钮不起作用

Question

在添加 jquery 脚本之前，Html 提交按钮确实可以正常工作。但是当我在用户学术信息中添加 jquery 脚本时，html 提交按钮不起作用。这个模板在 Django 中确实有效。我在 中添加了 jquery id="form_set"当我还添加 style="display:none"在 id="empty_form"提交按钮不起作用
这是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;">或者干脆改 <div>至 <tbody>那么问题就解决了...