Javascript 从其他模式打开引导模式

我在项目中使用bootstrap4和AJAX

第页中有2个模型。在第一个模态

（id='#模态lg'）

内，我有一个按钮，必须打开第二个模态

（id='#模态'）

。当我点击那个按钮时，它没有打开第二个模态。它只是关闭第一个模态。如何解决这个问题？我哪里做错了

template.html:

{# FIRST MODAL #}
<div class="modal fade" id="modal-lg">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-body">
            <button id="requirement-add-button" data-url="{% url 'project:requirement_add' %}">
               {% trans 'Add New Requirement' %}
            </button>
         </div>
      </div>
   </div>
</div>
{# FIRST MODAL #}

{# SECOND MODAL #}
<div class="modal fade" id="modal">
   <div class="modal-dialog">
      <div class="modal-content">

      </div>
    </div>
</div>
{# SECOND MODAL #}

$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_requirement_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#requirement-table tbody").html(data.html_requirement);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_requirement_form);
                }
            }
        });
        return false;
    };

    // CREATE
    $("#requirement-add-button").click(loadForm);
    $("#modal").on("submit", ".js-requirement-add-form", saveForm);
});

---

不确定服务器端脚本的结果（ajax结果）。但我做了一个示例概念证明，从第一个模态触发第二个模态。如下图所示，它工作正常

您检查过ajax数据的结果了吗？
您是否尝试过

console.log

或调试

data.html\u requirement

和/或

data.html\u requirement\u form

的结果

$（函数（）{
//负载时打开第一个模式
$（“#modal lg”）.modal（{background:“static”}）；
$（#openFirst”）。在（“单击”上，函数（e）{
$（“#modal lg”）.modal（{background:“static”}）；
});
$（“#需求添加按钮”）。在（“单击”上，功能（e）{
//隐藏第一模态
$（“#modal lg”）.modal（'hide'）；
//显示第二模态
$（“#modal.modal body”）.html（“第二模态内容”）；
$（“#modal”）.modal（{background:“static”}）；
});
});

开放优先
{#第一模态}
{%trans'添加新需求“%”
{#第一模态}
{#第二模态}
在这里测试第二模态
{#第二模态#}
你好！我有点困惑，因为我不知道如何用你的代码修改我的代码。你能再给我一个建议吗。让我试着向你解释一下我当前的代码。当用户单击按钮（
id=“requirement add button”
）时，我想运行
loadForm
功能。此函数仅显示第二模态和内部
。模态内容
块put表单。当用户提交第二个模式时，我希望保存此表单中的数据。我用我的其他模型测试了这个ajax。它起作用了。