jquery - 如何使用 jQuery 通过单击表格单元格中的文本来获取 event.target.id？

Question

我有一个简单的 HTML 表格，其中包含代码

<table><tr><td id=tdFavicon><b>Favicon</b></td></tr></table>

我想使用代码将事件绑定(bind)到它

$(tdFavicon).bind('click', saveOption);

但我的问题是当我使用代码时

function saveOption() {alert(event.target.id);}

当单击单元格时，我仅收到 ID“tdFavicon”警报，而不是单击单元格中的文本时收到警报。

在我看来这应该可行，但也许我的代码变得太复杂了。我在这个例子中改变了它。我也许可以创建一个带有 id 的跨度，以便将表格单元格内的文本绑定(bind)到，但我想知道为什么这不起作用。谁能帮我完成这项工作吗？

Answer 1

事件的泡沫。也就是说，当您单击某个元素时，它会在该元素上查找单击处理程序。如果找不到，它会先查找父元素，然后查找父元素的父元素，一直查找到根元素。

所以event.target是生成事件的元素(<b> 标记)，但不是处理该事件的元素(<td id="tdFavicon"> 标记)。 jQuery 提供处理事件的元素作为被调用处理函数的上下文(this 的值)。

这意味着，您需要做的就是:

function saveOption() {
    alert(this.id);
}
$('#tdFavicon').bind('click', saveOption);

或者更简单地说:

$('#tdFavicon').bind('click', function {
    alert(this.id);
});

Proof it works