jQuery DataTables проблема с наведением курсора - PullRequest
Новая
       1

jQuery DataTables проблема с наведением курсора

2 голосов
/ 29 февраля 2012

У меня есть эта страница. Когда я меняю количество записей, при наведении курсора на новые видимые записи происходит сбой. 

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

Ответы [ 3 ]

9 голосов
/ 06 марта 2012

Вам нужно делегирование события.Вместо того, чтобы прикреплять отдельных слушателей к каждой из строк в настоящее время в таблице, вы присоединяете только одну к контейнеру (#table) и передаете селектор (tr), чтобы соответствовать целям событий (так как события всплывают изнутри таблицы, если не прекращены с использованиемstopPropagation()).

Используя jQuery 1.7+, вы можете использовать функцию $(container).on(event, selectorString, func), равную $(container).delegate(event, selectorString, func) в jQuery <1.7. </p>

Вызов on() без среднего аргумента,как $(my_rows).on(event, func), будет равен 1,7 эквивалента $(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();
      });
});
1 голос
/ 06 марта 2012

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

Я только что проверил, и это сработало для меня.

0 голосов
/ 29 февраля 2012

При динамическом добавлении новых элементов, которые уже имеют связанные функции / события / действия, которые уже связаны, новые элементы не будут автоматически присваивать события / действия своих братьев и сестер.Я рекомендую использовать 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();
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...