jquery - 将 JQuery .on 选择器与表行和单元格一起使用

Question

我找了又找，没有结果。

我正在创建一个通过 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 来解决这个问题，但这很迂回，对我的学习没有帮助。

或者这就是它的工作原理吗？我觉得不对，但也许有人可以启发我？

Answer 1

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

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