在 table 加载后添加事件侦听器

Question

小范围:
我正在使用 django 模板。有一个 table 在结构上是通用的，因此不止一次被使用。现在，table 中有一个按钮可以打印 PDF 文档。我有一个网页，其中 table 加载在两个不同的地方，差异很小。在一个地方，它是通过调用 include 标签直接加载的。但是，在另一个地方，它是通过 Ajax 加载的。现在，有人可能会问为什么我只能用两种不同的方式来回答：该组件的工作流程的性质（遗留 s/w）。

问题:
来到重点。我创建了一个 Javascript 文件来处理与打印相关的工作流程。最初 Javascript 文件有一个 eventlistener 附加到按钮，该按钮设置为在单击时激活。

jQuery().ready(() => {
    jQuery('.dna-sample-material-page-button').on('click', printDnaSampleLabelMaterialPageHandler)
})

但是，由于 table 加载方式的不同，事件侦听器仅适用于直接加载的 table 而不是通过 [=31= 加载的 table ]. 为了克服这个问题，我尝试了以下方法：

jQuery().ready(() => {
    jQuery('.samples-table-unit-part').on('load', () => {
        jQuery('.dna-sample-material-page-button').on('click', printDnaSampleLabelMaterialPageHandler)
    })
})

其中 '.samples-table-unit-part' 是与通过 [=31 加载的 table 关联的 class =]. 但是，它不起作用。我的主要座右铭是为属于 table 的所有按钮添加事件侦听器。这是添加事件侦听器的正确方法吗？如果不行怎么办？

Answer 1

与 <iframe/>、<object/> 和 <img/> 元素不同，<table> 或任何其他静态 HTMLElement 没有加载事件，因此您在 [=14= 上加载事件]永远不会开火。

您应该找到 table 加载 AJAX 的代码部分，并且仅在 DOM 中插入 table 后才附加您的事件侦听器。

Answer 2

在 DOM ready 事件之后添加内容的情况下使用事件委托。尝试这样的事情：

jQuery('.samples-table-unit-part')
.on('click', '.dna-sample-material-page-button', printDnaSampleLabelMaterialPageHandler);

在 table 加载后添加事件侦听器

Add event listener after a table loads

javascript

jquery

event-listener

jquery-events