使用带有表格行与单元格的 JQuery .on 选择器

Posted 2023-05-09

【中文标题】使用带有表格行与单元格的 JQuery .on 选择器

【英文标题】：Using JQuery .on selector with table rows vs cells

【发布时间】：2014-11-25 14:08:26

【问题描述】：

我找了又找都没用。

我正在创建一个通过 AJAX 显示动态加载内容的网站。所以我的基本 html 有一个空表，并且在加载时添加了 <tr>s。由于<tr>s 在文档加载时不存在，我无法将 JQuery 事件附加到它们，例如$(tr).click(...).

我学会了解决这个问题的答案是做这样的事情：

$(document).ready(function() 
    $('table').on('click', 'tr', function(e) 
        alert('node name = '+e.target.nodeName+', id='+e.target.id);
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr id="rowID">
        <td id="cellID">One</td>
    </tr>
</table>

但是事件返回的目标是TD，而不是TR。那我做错了什么？

我知道我可以通过 e.target.parent.id 解决这个问题，但这很迂回，对我学习没有帮助。

或者这就是它的工作原理？对我来说似乎不对，但也许有人可以启发我？

【问题讨论】：

因为点击的目标是td，然而点击事件是tr。将e.target.nodeName 更改为$(this).prop("tagName")，你就会明白我的意思了

点击事件在行上，但实际目标是你点击的。毫不奇怪 e.target 返回表格单元格。

欢迎使用 jQuery。在元素事件中，您可以使用this 直接引用元素或使用$(this) 将其作为jQuery 对象获取。换句话说this == element event is attached too; this.tagName == $(this).prop("tagName") && this.id == $(this).prop('id')

完美！当然我可以用this！！我在其他事件上使用它，但我从来没有想过我可以将它与这个.on 事件一起使用（可能是因为该事件附加到表上）。我在 Codecademy 上关注示例，他们都使用 e.target.id，而他们本来可以使用 this.id。谢谢大家，尤其是@SpYk3HH，你的解释对我来说是最清楚的。

另外，令人印象深刻的响应时间！向所有相关人员致敬。感谢您的帮助。

【参考方案1】：

您的代码是正确的，这只是您对 event.target 的使用，正如其他人提到的 javascript 冒泡事件的方式，目标始终是您单击的实际项目。

jQuery 为您提供在this 对象或$(this) 中触发点击的元素（如果您需要jQuery 对象）。

【参考方案2】：

因为 event.target，你可以使用 jQuery(this).prop("tagName") 和 jQuery(this).attr("id") 代替。

$(document).ready(function() 
    $('table').on('click', 'tr', function(e) 
        alert('node name = '+jQuery(this).prop("tagName")+', id='+jQuery(this).attr("id"));
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr id="rowID">
        <td id="cellID">One</td>
    </tr>
</table>

【讨论】：

哦，谢谢。我会从下次开始处理这个。

您可以随时点击编辑按钮并在其中快速解释。 :)

【参考方案3】：

javascript冒泡是由内而外的，所以当你点击一系列嵌套元素时，最深的元素是目标，所以基本上是的，你必须使用你提到的方法才能获得 tr 为你的目标。

您可以做的另一件事（但不是在您的情况下）是用您想要成为目标的元素屏蔽（使用 z-index）您的元素，这样内部元素就不会被点击，并且外部元素是实际被点击的元素。

我需要补充的另一件事（正如其他人在 cmets 中所说）是您可以使用 this 或 jQuery 方式 $(this)

【参考方案4】：

TD 是目标，因为我们实际上是在点击它...在 Javascript 中，点击事件绑定到父级，而子级会受到影响。因此，当您单击 td 时，他的父级会触发该事件。

【讨论】：

没有。他所要做的就是使用this.id 或$(this).prop('id')