jQuery DataTables鼠標懸停問題

我有此頁。當我更改條目數時，新顯示的條目'mouseover失敗。jQuery DataTables鼠標懸停問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.js"></script> 
<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script> 

<link href="http://www.datatables.net/release-datatables/media/css/demo_table.css" rel="stylesheet" type="text/css"/> 

<style type="text/css"> 
    .edit {display: none} 
</style> 

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#example').dataTable(); 
    }); 
</script> 

<script> 
    jQuery(document).ready(function() { 
     jQuery('#example tr').mouseover(function() { 
      jQuery(this).find('span:first').show(); 
     }).mouseout(function() { 
      jQuery(this).find('span:first').hide(); 
     }); 
    }); 
</script> 
</head> 

<body> 
<table id="example" class="display"> 
    <thead> 
     <tr> 
      <th>A</th> 
      <th>B</th> 
      <th>C</th> 
      <th width="24em;">&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="gradeA" > 
      <td>a1</td> 
      <td>b1</td> 
      <td>c1</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a2</td> 
      <td>b2</td> 
      <td>c2</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a3</td> 
      <td>b3</td> 
      <td>c3</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a4</td> 
      <td>b4</td> 
      <td>c4</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a5</td> 
      <td>b5</td> 
      <td>c5</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a6</td> 
      <td>b6</td> 
      <td>c6</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a7</td> 
      <td>b7</td> 
      <td>c7</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a8</td> 
      <td>b8</td> 
      <td>c8</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a9</td> 
      <td>b9</td> 
      <td>c9</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a10</td> 
      <td>b10</td> 
      <td>c10</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a11</td> 
      <td>b11</td> 
      <td>c11</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a12</td> 
      <td>b12</td> 
      <td>c12</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a13</td> 
      <td>b13</td> 
      <td>c13</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
     <tr class="gradeA" > 
      <td>a14</td> 
      <td>b14</td> 
      <td>c14</td> 
      <td> <span class="edit"> <a href="#">EDIT</a> </span> </td> 
     </tr> 
    </tbody> 
</table> 
</body>

來源

2012-02-29 publicRavi

您需要事件代表團。您不需要將單獨的偵聽器附加到當前表中的每一行，只需將一個附加到容器（#table）並傳入選擇器（tr）以匹配事件目標（因爲除非停止使用，否則事件會從表內部冒泡stopPropagation()）。

使用jQuery 1.7+，您可以使用$(container).on(event, selectorString, func)函數，該函數在jQuery < 1.7中等於$(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(); 
     }); 
});

來源

2012-03-05 21:00:09 Flo

當添加新動態元素都被已經綁定預先存在的功能/事件/動作，新元素將自己的兄弟姐妹不會自動固有的事件/動作。我建議使用jQuery來做這樣的事情。

jQuery的版本大於1.3 - 使用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(); 
    } 
});

來源

2012-02-29 17:34:57 Downpour046

我有1.7.1。上面的代碼片段沒有幫助。閱讀（）:) – publicRavi 2012-02-29 17:59:51

請嘗試移動功能的鼠標到的.dataTable()

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#example').dataTable(   
      jQuery('#example tr').mouseover(function() { 
       jQuery(this).find('span:first').show(); 
      }).mouseout(function() { 
       jQuery(this).find('span:first').hide(); 
      }) 
     ); 
    }); 
</script>

我只是測試它的參數，它爲我工作。

來源

2012-03-05 21:18:24 Woodsy

jQuery DataTables鼠標懸停問題

回答

相關問題