添加事件监听器以动态创建表行答案

【问题标题】：Add event listener to dynamically create table row添加事件监听器以动态创建表行
【发布时间】：2021-08-15 19:35:45
【问题描述】：

我有一个带有 ajax 调用的表，用于在 tbody 元素中创建行。我在 html 页面上创建了表格。

<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

我的 javascript 代码将事件附加到 tbody 中每一行的第二个单元格

$('#mytable tbody').on( 'click', 'tr td:eq(2)',  function() {
    console.log($(this).html())
});

此代码仅适用于 tbody 第一行的第二个单元格。单击所有其他行的第二个单元格不会触发事件。我必须通过检查单元格索引来解决这个问题

if (this.cellIndex == 2) console.log($(this).html())

我还是想知道如何做出正确的选择。

【问题讨论】：

什么元素的 ID 为#lessons？
@j08691 我修正了错字，它应该是 jquery 语句上的表 id
如果您希望它适用于所有行，请使用 nth-child(3) 而不是 eq(2)。
@RoryMcCrossan 太好了！非常感谢！
很高兴它有帮助。我添加它作为你的答案

标签： javascript jquery jquery-selectors

【解决方案1】：

要选择每一行的特定td，请使用nth-child() 而不是eq()：

$('#mytable tbody').on( 'click', 'tr td:nth-child(3)',  function() {
  console.log($(this).html())
});

【讨论】：

【解决方案2】：

您可以只为整个表格设置一个事件侦听器，然后测试点击了什么。将事件侦听器添加到表中，如果表的内容发生更改，则无需再次分配。

添加类名既有助于提高可用性（设置光标样式），又可以更轻松地使用 JS 查找元素。

document.getElementById('mytable').addEventListener('click', e => {
  let td = e.target.closest('td[class="clickable"]');
  if (td) {
    console.log(e.target.innerText, 'was clicked');
  }
});

td.clickable {
  cursor: pointer;
}

<table id='mytable'>
  <thead>
    <tr>
      <th>First Col</th>
      <th>Second Col</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td class="clickable">Second 1</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 2</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 3</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 4</td>
    </tr>
  </tbody>
</table>

【讨论】：