1

我有一个带有代码的简单 HTML 表

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

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

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

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

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

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

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

4

2 回答 2

2

试试这个（注意：虽然 using$(tdFavicon)可能有效，但不能保证，而且它也比使用 selector 慢"#tdFavicon"。）

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

function saveOption(elem,ev) {
 alert("table cell: " + elem.id + "  object clicked: " + ev.target.tagName);
}

您的代码不起作用的原因是点击事件实际上是在文本元素上，所以这就是您得到的 - 一个空的 id。总而言之，您的代码运行得很好，只是出现了逻辑错误。

于 2012-10-02T00:29:05.827 回答
2

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

event.target生成事件的元素（标签）也是如此<b>，但不是处理它的元素（<td id="tdFavicon">标签）。jQuery 提供处理事件的元素作为被调用处理函数的上下文（的值this）。

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

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

或者更简单地说：

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

证明它有效

于 2012-10-02T00:35:13.803 回答