javascript - Bootstrap 5 offcanvas 错误：未捕获的 TypeError：无法读取未定义的属性“parentNode”

Question

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

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

错误信息

<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 信息，因此为了安全起见，我阻止了我的域。 静态 HTML

Answer 1

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

这是一个提到它的链接。Document.querySelector()