jQuery DataTables鼠标hover问题

我有这个页面。 当我更改条目数时，新显示的条目的鼠标hover失败。

        .edit {display: none}   $(document).ready(function() { $('#example').dataTable(); } );   jQuery(document).ready(function() { jQuery('#example tr').mouseover(function() { jQuery(this).find('span:first').show(); }).mouseout(function() { jQuery(this).find('span:first').hide(); }); });    
 
 
 
A
 
B
 
C
 
 
 
 
 
 
 
a1
 
b1
 
c1
 
  EDIT  
 
 
 
a2
 
b2
 
c2
 
  EDIT  
 
 
 
a3
 
b3
 
c3
 
  EDIT  
 
 
 
a4
 
b4
 
c4
 
  EDIT  
 
 
 
a5
 
b5
 
c5
 
  EDIT  
 
 
 
a6
 
b6
 
c6
 
  EDIT  
 
 
 
a7
 
b7
 
c7
 
  EDIT  
 
 
 
a8
 
b8
 
c8
 
  EDIT  
 
 
 
a9
 
b9
 
c9
 
  EDIT  
 
 
 
a10
 
b10
 
c10
 
  EDIT  
 
 
 
a11
 
b11
 
c11
 
  EDIT  
 
 
 
a12
 
b12
 
c12
 
  EDIT  
 
 
 
a13
 
b13
 
c13
 
  EDIT  
 
 
 
a14
 
b14
 
c14
 
  EDIT  
 
 
 
  

Answer 1

你需要事件授权。 您不必将单独的侦听器附加到当前表中的每个行，而只将一个附加到容器（#table）并传入选择器（tr）以匹配事件目标（因为事件从表内部冒泡，除非停止使用stopPropagation() ）。

使用jQuery 1.7+，您可以在jQuery <1.7中使用$(container).on(event, selectorString, func)函数，该函数等于$(container).delegate(event, selectorString, func) 。

没有中间参数的调用on()如$(my_rows).on(event, func) ，将是$(my_rows).bind('mouseover', func)的1.7当量，它只适用于当前在DOM中的元素。

 jQuery(document).ready(function() { jQuery('#example'). on('mouseover', 'tr', function() { jQuery(this).find('span:first').show(); }). on('mouseout', 'tr', function() { jQuery(this).find('span:first').hide(); }); }); 

Answer 2

尝试将鼠标function移动到.dataTable()的参数中

我刚试过它，它对我有用。

Answer 3

当动态添加具有已经存在的已经存在的函数/事件/动作的新元素时，新元素将不会自动固有其兄弟姐妹的事件/动作。 我推荐使用jQuery这样的东西。

对于大于1.3的jQuery版本 – 使用jQuery BIND（）函数： http ： //api.jquery.com/bind/

描述：这将映射传递给所需的新事件处理程序的数据

对于jQuery 1.7或更高版本 – 使用jquery ON（）函数：

http://api.jquery.com/on/

对于您的代码，如果Jquery 1.7尝试：

 jQuery("#example tr").on({ mouseenter: function(){ jQuery(this).find('span:first').show(); }, mouseleave: function(){ jQuery(this).find('span:first').hide(); } });