Django使用Bootstrap5模态框触发Illegal invocation错误如何解决？

报错原因 #

• 第一是你的模态框模板结构不符合Bootstrap 5的规范要求：Bootstrap 5 模态框的根元素必须带有modal类，且需要包含modal-dialog、modal-content等标准子结构，你当前使用自定义的modal-container类，导致Bootstrap的选择器引擎找不到预期的DOM元素，抛出非法调用错误。
• 第二是重复初始化模态框实例：多次触发点击事件加载新的模态框内容时，没有销毁之前已经初始化的模态框实例，旧实例绑定的DOM被替换后，再次调用方法就会出现调用异常。
• 额外注意：Bootstrap 5 已经移除了对jQuery的强制依赖，虽然兼容jQuery式的$().modal()调用，但混用原生和jQuery接口容易出现兼容问题。

解决方法 #

1. 修正模态框模板结构 #

按照Bootstrap 5 官方规范调整模板代码：

<div id="photo-modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>{{ photo.id }}</p>
      </div>
    </div>
  </div>
</div>

2. 调整JS逻辑，避免重复初始化 #

修改触发脚本，每次加载新内容前先销毁旧实例，使用Bootstrap原生API初始化模态框：

var modalDiv = $("#modal-div");
$(".open-modal").on("click", function() {
    // 销毁已存在的模态框实例，清空旧内容
    const oldModal = bootstrap.Modal.getInstance('#photo-modal');
    if (oldModal) {
        oldModal.dispose();
    }
    modalDiv.empty();

    $.ajax({
        url: $(this).attr("data-url"),
        success: function(data) {
            modalDiv.html(data);
            // 用Bootstrap原生API初始化并展示模态框
            const newModal = new bootstrap.Modal(document.getElementById('photo-modal'));
            newModal.show();
        }
    });
});

内容的提问来源于stack exchange，提问作者curtisp