Question

我搜索并搜索无济于事。

我正在创建一个通过AJAX显示动态加载内容的网站。所以我的基本HTML有一个空表，加载时会添加<tr>。由于<tr>在文档加载时不存在，我无法将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对象，jQuery会为你提供点击在this对象或$(this)中触发的元素。

Answer 2

因为event.target，你可以使用jQuery（this）.prop（＆＃34; tagName＆＃34;）和jQuery（this）.attr（＆＃34; id＆＃34;）代替。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

你可以做的另一件事（但不是在你的情况下）是使用你想成为目标的元素来掩盖（使用z-index）元素，因此内部元素不会被点击，外部元素是实际被点击的元素。

我需要添加的另一件事（如其他人的评论中所述）是您可以使用tr或者click来引用tr的this事件中的$(this) jQuery方式{{1}}

Answer 4

TD是目标，因为我们实际上是在点击它...在Javascript中，click事件绑定到父级，并且子级受到影响。所以当你点击td时，他的父母会触发事件。

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

4 个答案: