Fatal编程技术网
  • jquery/
  • jQuery数据表鼠标悬停问题

jQuery数据表鼠标悬停问题

jquery datatables

jQuery数据表鼠标悬停问题,jquery,datatables,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="Conte

我有这一页。当我更改条目数时，新可见条目数的鼠标悬停失败

    <!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>


.编辑{显示：无}
$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
} );
jQuery（文档）.ready（函数（）{
jQuery（'#示例tr'）.mouseover（函数（）{
jQuery（this.find（'span:first'）.show（）；
}).mouseout（函数（）{
jQuery（this.find（'span:first'）.hide（）；
});
}); 
A.
B
C
a1
b1
c1
a2
b2
c2
a3
b3
c3
a4
b4
补体第四成份
a5
b5
碳五
a6
b6
c6
a7
b7
c7
a8
b8
c8
a9
b9
c9
a10
b10
c10
a11
b11
c11
a12
b12
c12
a13
b13
c13
a14
b14
c14
动态添加具有已绑定的现有函数/事件/操作的新元素时，新元素不会自动包含其同级的事件/操作。我建议使用jQuery进行类似的操作

对于大于1.3的jQuery版本，请使用jQuery BIND（）函数：

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

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

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

jQuery("#example tr").on({

  mouseenter: function(){
    jQuery(this).find('span:first').show();
  },
  mouseleave: function(){
    jQuery(this).find('span:first').hide();
  }
});
你需要活动授权。与将单独的侦听器附加到表中当前的每一行不同，您只将一个侦听器附加到容器（#表）并传入选择器（tr）以匹配事件目标（因为除非停止使用
stopPropagation（）
，否则事件会从表内冒泡）

使用jQuery 1.7+可以使用
$（容器）。在（event，selectorString，func）
函数上，该函数等于
$（容器）。在jQuery中委托（event，selectorString，func）
尝试将鼠标的函数移到
.dataTable（）的参数中。


$（文档）.ready（函数（）{
$（'#示例'）。数据表（
jQuery（'#示例tr'）.mouseover（函数（）{
jQuery（this.find（'span:first'）.show（）；
}).mouseout（函数（）{
jQuery（this.find（'span:first'）.hide（）；
})  
);  
} );
我刚刚测试了它，它对我有效。

我有1.7.1。上面的代码片段没有帮助。正在读取（）上的内容：） 
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();
      });
}); 

<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>