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

Question

我正在使用数据表插件来显示表格。在配置参数中，我设置了 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'); }
});

Answer 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() 执行相同的操作。 code> 取决于所使用的语法:http://api.jquery.com/on