处理表格单元格悬停时冒泡的jQuery事件

Question

我刚刚开始使用 jQuery 进行事件冒泡，所以我的理解非常有限。我需要处理在父容器级别的 html 表（网格）行/单元格上发生的所有事件。例子： 1.当用户点击一行时，我不想将点击事件绑定到每个我将它绑定到父级。 2.当用户将鼠标悬停在单元格上时，我想显示工具提示，即需要将标题属性设置为单元格的文本元素。我也需要冒泡这个活​​动。

我能够解决我的要求的第一部分。这是第 1 部分的代码（下面添加了 jsFiddle）：

$('#grid').click(function(evt) {
    var row = $(evt.target).parent('tr'); // Get the parent row
    var cell= $(evt.target); //Get the cell
    alert('Row data: ' + row.text());
    alert('Cell data: ' + cell.text());
});

我认为实现悬停也很简单。但我无法捕获单个单元格的值。这是我在小提琴jsFiddle: sample code to bubble the event on cell hover中的示例代码

另外，我注意到我在悬停时看到了两次警报。我猜它是为单元格引发事件一次，然后为行/表引发事件。不确定？

Answer 1

您可以$.on 来实现这一点，如下所示。从 jQuery 1.7 开始，所有对.live()、.bind()、'.delegate()' 的调用都在后台使用.on()。而.on 仅在#grid 上绑定事件并拦截该元素上的事件，然后检查目标是否匹配第二个选择器。如果是，则执行该函数。

$('#grid').on('mouseenter','td', function(){
       console.log($(this).text());
   });​

Working Fiddle