javascript - 父单元格的输出id

Question

我四处搜索，实际上从 Stackoverflow 上的另一个与此类似的问题中获得了帮助，但我似乎无法让它工作。当用户点击它时，我试图输出父单元格 ID。HTML:

<table>
<tr>
<td class='test' id='1'><img src='images/dog.gif'/></td>
<td class='test' id='2'><img src='images/cat.gif'/></td>
<td class='test' id='3'><img src='images/mouse.gif'/></td>
<td class='test' id='4'><img src='images/human.gif'/></td>
</tr>

JS:

$('.test').on('click', 'td', function(e)
{ alert(this.id); })

有什么帮助吗？另外，我将如何将其显示为页面上的文本而不是警报？

谢谢

Answer 1

这里不需要使用事件委托(delegate)，事件也应该从元素的静态父元素之一委托(delegate)，而不是元素本身，试试这个:

$(document).ready(function() { // when DOM is ready
    $('td.test').click(function(e) { 
       alert(this.id); 
    })
})

如果要将值设置为另一个元素的文本内容，可以使用text方法:

$('#element').text(this.id);