问题描述
我有这个页面。当我更改条目数时，新显示条目的鼠标悬停失败。
I have this page. When I change the number of entries, newly visible entries' mouseover fails.
<!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;"> </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>
推荐答案
您需要事件委托。而不是将单独的侦听器附加到表中当前的每个行中，您只需将一个附加到容器（#table），并传入一个选择器（tr）以匹配事件目标（因为事件从表中起，除非停止使用 stopPropagation（））。
You need event delegation. Instead of attaching separate listeners to each of the rows currently in the table, you attach just one to the container (#table) and pass in a selector (tr) to match event targets (since events bubble up from inside the table unless stopped using stopPropagation()).
使用jQuery 1.7+可以使用 $ ）.on（event，selectorString，func）在jQuery中等于 $（container）.delegate（event，selectorString，func） < 1.7。
Using jQuery 1.7+ you can use the $(container).on(event, selectorString, func) function which is equal to $(container).delegate(event, selectorString, func) in jQuery <1.7.
调用 on（）没有中间参数，如 $ my_rows）.on（event，func）将是1.7 $的$ code $（my_rows）.bind（'mouseover'，func）只适用于DOM中的元素。
Calling on() without the middle argument, like $(my_rows).on(event, func), would be the 1.7 equivalent of $(my_rows).bind('mouseover', func) which only applies to elements currently in the 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();
});
});
这篇关于jQuery DataTables mouseover问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！