Django Bootstrap 模态报错

Question

我正在使用在 on("click") 事件上执行的 jQuery 脚本来执行以下操作：

ajax 调用 Django url / 填充 'modal template'.
模态模板的 HTML 然后附加到空模态 div。
ajax success 事件然后 show() 模态 div.

一切似乎都正常工作，例如，我得到了要显示的模态，其中填充了模态模板内容，但我也遇到了以下错误：

Uncaught TypeError: Illegal invocation selector-engine.js:22 
at Object.findOne (selector-engine.js:22)
at De._showElement (modal.js:221)
at modal.js:143
at b (index.js:242)
at backdrop.js:53
at b (index.js:242)
at v (index.js:248)
at ke._emulateAnimation (backdrop.js:125)
at ke.show (backdrop.js:52)
at De._showBackdrop (modal.js:328)

知道这里发生了什么吗？

使用Bootstrap5,jquery-3.6

空模态 div:

<div id="modal-div"></div>

脚本：

var modalDiv = $("#modal-div");
$(".open-modal").on("click", function() {
    $.ajax({
        url: $(this).attr("data-url"),
        success: function(data) {
            modalDiv.html(data);
            $("#photo-modal").modal('show');
        },
    });
});

编辑添加：脚本和空模态div都在Django“base.html”文件中。

模态模板HTML:

<div id="photo-modal" class="modal-container">

    <p>{{ photo.id }}</p>

</div>

Answer 1

原来我需要修改 <div id="modal-div"></div> 所以它是 <div class="modal" id="modal-div"></div>

Django Bootstrap 模态报错

Django Bootstrap modal is giving an error

jquery

django

ajax

bootstrap-modal