-2

我的一个页面有这样的结构： 

head  
    script  
   /script  
/head  
body  
    table1  
    table2  
/body

这是javascript： 

<script type="text/javascript">
    $( function() {
      $('tr').click( function() {
         $(this).parents('table').find('tr').each( function( index, element ) {
              $(element).removeClass('selected');
         } );
         $(this).addClass('selected');
         $(this).removeClass('normal');
      } );
    } );
    $( function() {
      $('tr').hover( function() {
         $(this).addClass('highlight');
         $(this).removeClass('normal');
      } );
    } );
    $( function() {
        if($('tr').hasClass('selected')) {
        }
        else {
          $('tr').mouseout( function() {
             $(this).removeClass('highlight');
          } );        
        }
    } );
</script>

table1 是通过加载页面生成的，而 table2 是通过单击 table1 的任何行使用 Ajax 生成的。

单击或悬停时，脚本会向 tr （表格行）添加一些类，以便我可以设置它们的样式（更改背景颜色）

该脚本适用于 table1 行并添加类，但不适用于 table2 行！

任何帮助，将不胜感激。

4

3 回答 3

4

这些事件仅适用于页面加载时存在的元素。您需要为它们使用“实时”事件来影响 AJAX 加载的表 (table2)。

为此，您可以使用 jQuery 的.on：

$(function(){
    $(document).on('click', 'tr', function() {
         $(this).parents('table').find('tr').each( function( index, element ) {
              $(element).removeClass('selected');
         } );
         $(this).addClass('selected');
         $(this).removeClass('normal');
    });
    $(document).on('hover', 'tr', function() {
         $(this).addClass('highlight');
         $(this).removeClass('normal');
    });
    $(document).on('mouseover', 'tr', function(){
        if(!$(this).hasClass('selected')){
            $(this).removeClass('highlight');
        }
    });
});

注意：代替document，您可以使用两个表的最高父级（只要它保留在 DOM 中）。

更新：if($('tr').hasClass('selected')) {仅在 DOM 加载时运行。将该检查放入事件中。

PS您可以将所有这些$( function() {组合在一起。

于 2012-05-31T20:56:59.160 回答
2

使用 jQuery.on()应该可以解决问题：（删除多余的事件处理程序以准备好文档）

$(function() {
    $('table').on('click', 'tr', function() {
        $(this).siblings('tr').removeClass('selected');
        $(this).addClass('selected').removeClass('normal');
    });
    $('table').on('hover', 'tr', function() {
        $(this).addClass('highlight').removeClass('normal');
    });
    $('table').on('mouseout', 'tr', function() {
        $(this).not(".selected").removeClass('highlight');
    });

});

编辑：修复了鼠标悬停时的非选择器。

这是一个工作示例：http: //jsfiddle.net/JCbfw/

编辑：请注意，如果您希望它更紧一点，点击代码可能是这样的：

$('table').on('click', 'tr', function() {
    $(this).addClass('selected').removeClass('normal').siblings('tr').removeClass('selected');
});
于 2012-05-31T21:09:28.540 回答
0

hover与您的问题无关，如果您将行为放入 CSS 代码中会更好：

whatever:hover {}
于 2012-05-31T21:10:14.667 回答