带有数据表的 jquery mouseenter mouseleave，在 chrome 或 IE 中不起作用答案

【问题标题】：jquery mouseenter mouseleave with datatables, doesnt work in chrome or IE带有数据表的 jquery mouseenter mouseleave，在 chrome 或 IE 中不起作用
【发布时间】：2012-01-20 12:18:39
【问题描述】：

我正在使用数据表插件来显示表格。在配置参数中，我设置了bJQueryUI : true，因此该表应用了我正在使用的当前 jQuery UI 样式的样式。在最后一列中，我添加了一些图标来对行执行操作。问题是数据表图标和标题上的悬停事件仅在 Firefox 中有效，在 Chrome 或 IE 中不会触发事件。

我使用的代码是这样的：

$('.ui-state-default').live({ 
    mouseenter:
         function(){ $(this).addClass('ui-state-hover'); },
    mouseleave:
         function(){ $(this).removeClass('ui-state-hover'); }
});

【问题讨论】：

标签： jquery google-chrome mouseover datatables mouseleave

【解决方案1】：

您是否在您的开发者工具中检查了您想要悬停的区域中元素的分层？您应该检查项目的 z-index 以确保 .ui-state-default 元素位于顶部。

您还应该将.live() 更改为.delegate()。它们是相似的，但您可以使用 .delegate() 设置根元素，而使用 .live() 时，根元素始终是 document 元素：

$(<root element>).delegate('.ui-state-default', 'mouseenter', function () {...}).delegate('.ui-state-default', 'mouseleave', function () {...});

.live() 自 jQuery 1.7 起已弃用。从 jQuery 1.7 开始有一个名为 .on() 的新函数，它与 .bind() 和 .delegate() 执行相同的操作，具体取决于使用的语法：http://api.jquery.com/on

【讨论】：

谢谢！这是我一直在寻找的解决方案。
@Jasper - 虽然.delegate() 实际上还没有被弃用，但它在未来某个地方的砧板上。由于它现在只是.on() 的别名，因此更安全的语法是直接转到.on()。不过答案很好！