Question

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

我能够解决我要求的第一部分。以下是第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

处理表格单元格悬停上的jquery事件冒泡

1 个答案: