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

时间:2012-05-31 20:49:38

标签: javascript jquery ajax hover tablerow

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

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

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分: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');
        }
    });
});

注意:您可以使用两个表中最高的父级(只要它保留在DOM中)而不是document

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

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

答案 1 :(得分: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');
});

答案 2 :(得分:0)

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

whatever:hover {}