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

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

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

另外，我注意到我在悬停时看到两次警报。我想这是为单元格提升事件一次，然后是为行/表格。不确定？

来源

2012-06-14 Sri Reddy

不能回答你的问题完全，但你想'mouseover'，而不是'hover'。 – sachleen

@sachleen，将其更改为mouseover会显示单元格值，但首先显示整个表格内容，然后显示单元格值。我可以限制它只返回单元格值吗？ –

这是因为它也悬停在桌子上。你想做什么joshatjben建议，但这是它的工作版本：http://jsfiddle.net/3xp7Q/3/ – sachleen

你可以$.on来实现这个如下。从jQuery 1.7到.live()，.bind()的所有调用中，'.delegate（）'在引擎盖下使用.on()。并且.on仅绑定#grid上的事件并截获该元素上的事件，然后检查目标是否占用第二个选择器。如果是，则执行该功能。

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

Working Fiddle

来源

2012-06-14 18:55:36

哇，我从来没有注意到'Firebug Lite'复选框。太方便了！不必为定位Chrome开发工具窗口而烦恼，因为它不会妨碍您的工作。 – sachleen

@sachleen，是的，非常方便。但只有当你选择'jQuery（edge）'作为库/框架时才可用。 –

同样的问题，这个实现与我发布的实现有什么不同？我的意思是，如何使用与原始帖子中的事件冒泡代码不同的代理点击事件？我也喜欢jQuery边缘 - 感谢您向我们展示:) –

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

回答

相关问题