Django Bootstrap 模式出现错误

Posted 2023-05-08

【中文标题】Django Bootstrap 模式出现错误

【英文标题】：Django Bootstrap modal is giving an error

【发布时间】：2021-12-09 10:28:24

【问题描述】：

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

对填充“模态模板”的 Django url/视图的 ajax 调用。 模态模板的 html 然后附加到一个空的模态 div。 ajax success 事件然后执行 show() modal 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>

【问题讨论】：

脚本和空模态 div 都在 Django "base.html" 文件中。

【参考方案1】：

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