jQuery 事件委托未检索表内容

Posted 2023-03-05

【中文标题】jQuery 事件委托未检索表内容

【英文标题】：jQuery event delegation is not retrieving table contents

【发布时间】：2021-12-21 17:44:21

【问题描述】：

编辑以包含最终目标： 当我单击表格行时，我最终希望检索该行上每个单元格的内容。在此示例中，我只是尝试获取单击的行中任何一个单元格（第一个？）的内容。一旦我得到一个单元格，我确信我可以得到其他单元格。

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

事件委托工作，它不是问题（检测到点击，触发警报）。对事件委托基础知识的引用不会有帮助，因为这不是问题所在。

我认为问题在于与事件相关的函数。我基于此 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：

<div id="loadQA"> <!-- THIS ELEMENT IS STATIC -->

<table class='table table-dark table-hover table-borderless' id='qaDAT'> <!-- DYNAMIC TABLE -->
     <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 解决方案结合起来。 我可以独立实现这些，但在尝试结合这些技术时不行。我哪里做错了？

【问题讨论】：

您将事件委托给table，而不是td 或tr。

您希望在$text 中获得哪些文本？

您希望能够点击哪些元素。当他们点击它时你想发生什么？

当我单击一行时，我最终希望检索该行上每个单元格的内容。在此示例中，我只是尝试获取单击的行中任何单元格（第一个？）的内容。一旦我得到一个单元格，我确信我可以得到其他单元格。

【参考方案1】：

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

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

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