Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot read property 'parentNode' of undefined

Question

循环列表以创建 table 信息和画布菜单以在单击 table 行 <tr> 时显示附加信息。目前，当我点击任何 .我为什么会收到此错误有什么想法吗？

<tr> 有一个“data-bs-target”指向 Offcanvas 的正确“id”，但由于某种原因它不知道父节点。

Error Message

<table class="table table-hover table-sm" id="t1">
  <thead class="table-secondary">
    <th scope="col" class="name">
      Host Name
    </th>
    <th scope="col" class="ip_address">
      IP Address
    </th>

         ... 

  </thead>
  <tbody class="lan-table">
    {% for host in hosts %}

      <tr class="host-row" data-view='host' data-bs-toggle="offcanvas" data-bs-target="#{{host.fqdn}}-host-details">
        <td class="host-fqdn"></td>
        <td class="host-ip-address"></td>

           ...

      </tr>
    {% endfor %}
  </tbody>
</table>

...

{% for host in hosts %}
  <div class="offcanvas offcanvas-end w-25" data-bs-scroll="true" tabindex="-1" id="{{host.fqdn}}-host-details" style="min-width: 400px;">

    ...

  </div>
{% endfor %}

下面是正确生成页面的屏幕截图。注意：由于这是捕获 fqdn 信息，为了安全起见，我屏蔽了我的域。 Static HTML

Answer 1

我发现为什么我的 offcanvas 不工作了。我的“data-bs-target”id 中有句点字符，offcanvas 的 javascript 使用 querySelector，它需要转义特殊字符才能工作。

这里有一个 link 提到了它。 Document.querySelector()

Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot read property 'parentNode' of undefined

Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot read property 'parentNode' of undefined

javascript

bootstrap-table

off-canvas-menu

bootstrap-5