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

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

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

如果要将值设置为其他元素的文本内容，可以使用text方法：

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

Answer 2

您可以在当前html的末尾添加div，如下所示：

<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>
<div id='output'></div>

并将您的提醒更改为

$('#output').append(this.id + '<br>');

现在，这将在您的div中创建一行，其中包含您单击的单元格的ID。将未定义的更改与事件处理程序结合起来就可以了。

父单元格的输出ID

2 个答案: