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