我正在开发一个UI，它包含数据库中的行列表。每一行都是可编辑的，当点击edit按钮时，我的意图是弹出一个模态对话框窗口，其中包含通过AJAX预先加载到表单中的数据，用于编辑特定的行，如下图所示。

下面的代码显示了一个可以使用的工作设置。

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

function loadEditModal(rowID) {
  console.log("Clicked row " + rowID + "\n");
  //populate the content of the modal window
  //jQuery('#editModal').modal('show');
  modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
  modal1.show();
}

<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">
  <!-- table displaying contents of encoding queue -->
  <div class="row">
    <div class="table-responsive-xxl">
      <table class="table table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">ID#</th>
            <!-- episode_id -->
            <th scope="col">Podcast</th>
            <!-- podcast_code -->
            <th scope="col">Title</th>
            <th scope="col">Seq.</th>
            <th scope="col">Status</th>
            <!-- last_action -->
            <th scope="col">Date</th>
            <!-- last_action_date -->
            <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 disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
              <!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
  <!-- class="row" -->

  <!-- modal for editing rows -->
  <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>

然而，每次点击edit按钮显示模态时，我都会在js控制台中得到以下错误：
未捕获的类型错误：无法访问属性"background"，此._config未定义

这似乎是由于我是通过javascript的onclick事件来启动modal的，如果我稍微修改一下html和js，使用按钮的"data-bs-target"属性来打开modal，它就可以正常工作而不会出现js错误。
一个二个一个一个
但是我不能这样做，因为我必须获取数据来用AJAX编辑，并在显示之前填充模态的主体。有人能告诉我需要做什么来消 debugging 误吗？