jQuery 事件委托未检索 table 内容

Question

编辑以包含最终目标： 当我单击 table 行时，我最终想检索每个单元格的内容在那一行。在这个例子中，我只是想获取被单击的行中任何一个单元格（第一个？）的内容。一旦我得到一个细胞，我肯定我能得到其他细胞。

我之前已经成功地将事件委托与动态元素一起使用，但我不明白为什么 它不适用于我的 table - 特别是 tables.

事件委托有效，不是问题（检测到点击，触发警报）。参考事件委托的基础知识不会有帮助，因为那不是问题所在。

我认为问题出在与事件关联的函数上。我基于这个关于检索 table 内容的 QA 函数，但我必须错误地应用解决方案作为偶数委托的函数：Get the contents of a table row with a button click

jQuery 事件委托：

$('#loadQA').on('click', 'table', function () { // PROBLEM ISN'T HERE // THE PROBLEM MUST BE IN HERE SOMEWHERE var $row = $(this).closest("tr"); var $text = $row.find("td").text(); alert($text); })

HTML 包含动态 table:

<div id="loadQA">  <table class='table table-dark table-hover table-borderless' id='qaDAT'>  <thead class='darker text-orange' id='qaHead'> <tr> <th scope='col'>#</th> <th scope='col'>Question</th> <th scope='col'>Answer</th> </tr> </thead> <tbody> <tr id='rowDAT'> <th class='colDAT' scope='row'>qaID</th> <td class='colDAT'>question</td> <td class='colDAT'>answer</td> </tr> </tbdoy> </table> </div>

摘要： 我正尝试将 jQuery 事件委托 与链接的 QA 结合静态 tables 的解决方案。 我可以独立实现这些，但在尝试组合这些技术时不能。我哪里错了？

Answer 1

您应该委托给 table 个单元格，而不是整个 table。

从那里您可以导航到使用 .closest() 的行，然后导航到行中的单元格。

$('#loadQA').on('click', 'td,th', function () {
    var $row = $(this).closest("tr");
    $row.find("td").each(function() {
        console.log($(this).text());
    });
})

jQuery 事件委托未检索 table 内容

jQuery event delegation is not retrieving table contents

jquery

html-table

dynamic

cell