使用JavaScript打开Bootstrap Modal时出现类型错误的解决求助

场景说明 #

我正在开发一个展示数据库行列表的UI，每行支持编辑。点击编辑按钮时，需要通过AJAX预加载对应行的数据到Bootstrap Modal的表单中，完成数据填充后再打开Modal。

报错的代码示例 #

JavaScript 代码 #

jQuery(document).ready(function() {
  // console.log('podcast episode list js loaded');
  // jQuery('#editModal').modal('show');
});

function loadEditModal(rowID) {
  console.log("Clicked row " + rowID + "\n");
  // 计划在这里通过AJAX填充Modal内容
  modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
  modal1.show();
}

HTML 代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <!-- 展示编码队列内容的表格 -->
  <div class="row">
    <div class="table-responsive-xxl">
      <table class="table table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">ID#</th>
            <th scope="col">Podcast</th>
            <th scope="col">Title</th>
            <th scope="col">Seq.</th>
            <th scope="col">Status</th>
            <th scope="col">Date</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>8</td>
            <td>bw</td>
            <td>Build a birdhouse</td>
            <td>345</td>
            <td>{"error":"none","message":"initial insert","status":"processing"}</td>
            <td>2023-03-22</td>
            <td class="text-end" style="white-space: nowrap">
              <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
              <button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 编辑行的Modal -->
  <div class="row">
    <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="editModalBody">
            this is where the body content goes...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

错误信息 #

点击编辑按钮打开Modal时，控制台会抛出以下错误：

Uncaught TypeError: can't access property "backdrop", this._config is undefined

无错误但不符合需求的方案 #

如果给按钮添加data-bs-target="#editModal"属性，通过Bootstrap原生方式打开Modal则不会报错，但这种方式无法先执行AJAX获取数据再打开Modal，不符合业务需求：

JavaScript 代码 #

jQuery(document).ready(function() {
  // console.log('podcast episode list js loaded');
  // jQuery('#editModal').modal('show');
});

function loadEditModal(rowID) {
  console.log("Clicked row " + rowID + "\n");
}

HTML 代码（按钮部分修改） #

<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>

求助问题 #

我需要先通过AJAX获取数据并填充Modal内容，再手动打开Modal，请问如何解决这个this._config is undefined的错误？

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