jQuery DataTables mouseover issue

У меня есть эта страница. Когда я меняю количество записей, нахождение мыши видимых видимых объектов не выполняется.jQuery DataTables mouseover issue

<!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), которая равна $(container).delegate(event, selectorString, func) в jQuery < 1.7.

Вызов on() без среднего аргумента, такого как $(my_rows).on(event, func), был бы эквивалентом 1,01 $(my_rows).bind('mouseover', func), который применяется только к элементам, находящимся в 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. Выше фрагмент не помог. Чтение on on() :) – publicRavi

Попробуйте переместить функцию для мыши над в параметрах .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 mouseover issue

ответ

Смежные вопросы