Question

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

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是通过使用Ajax单击table1的任何一行生成的。

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

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

任何帮助将不胜感激。

Answer 1

这些事件仅适用于加载页面时存在的元素。您需要使用“实时”事件来影响加载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');
        }
    });
});

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

更新：if($('tr').hasClass('selected')) {仅在加载DOM时运行。把那张支票放在活动中。

P.S。您可以将所有$( function() {组合在一起。

Answer 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');
    });

});

编辑：修复了mouseout上的not selector。

以下是工作示例：http://jsfiddle.net/JCbfw/

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

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

Answer 3

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

whatever:hover {}

为什么Javascript函数不适用于元素？

3 个答案: