Django Bootstrap模式给出了一个错误

Question

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

1. ajax调用Django url/view来填充一个'模态模板'。
然后将
2. 模态模板的HTML添加到空的模态div中。
3. ajaxsuccess事件然后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)

你知道这里发生了什么吗?

使用Bootstrap 5, 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>