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

我的一个页面有以下结构：

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>

$（函数（）{
$（'tr'）。单击（函数（）{
$（this）.parents（'table'）.find（'tr'）.each（函数（索引，元素）{
$（element.removeClass（'selected'）；
} );
$（this.addClass（'selected'）；
$（this.removeClass（'normal'）；
} );
} );
$（函数（）{
$（'tr'）。悬停（函数（）{
$（this.addClass（'highlight'）；
$（this.removeClass（'normal'）；
} );
} );
$（函数（）{
if（$（'tr'）.hasClass（'selected'））{
}
否则{
$（'tr'）.mouseout（函数（）{
$（this.removeClass（'highlight'）；
} );        
}
} );

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

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

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

---

任何帮助都将不胜感激。

这些事件仅适用于加载页面时存在的元素。您需要使用“实时”事件来影响AJAX加载的表（表2）

为此，您可以使用jQuery的：

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

document

更新：仅当加载DOM时，

if（$（'tr'）.hasClass（'selected'））{

才会运行。请将该检查放入事件中

另外，您可以将所有这些

$（function（）{

组合在一起。

使用jQuery

。on（）

应该可以做到这一点：（为文档就绪删除多余的事件处理程序）

编辑：修复了鼠标输出上的not选择器

以下是一个工作示例：

编辑：请注意，如果您希望它更紧凑，单击代码可以是：

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

---

与您的问题无关，如果将您的

悬停

行为放入CSS代码中会更好：

whatever:hover {}

---

发布JavaScript代码您需要发布更多的代码。发布您所引用的脚本。请包含实际的表html和相关的cssthanks以供回复。请告诉我在使用jquery时使用什么来代替鼠标悬停和鼠标悬停。on@bijibuji：与我发布的内容相同，只需将

'click'

更改为

'hover'或
'mouseout'
有什么问题？！$（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'）；}）；if（$（'tr'）.hasglass（'selected'））{}else{$（document）.on（'mouseout'，'tr'，function（）{$（this.addClass（'highlight'）；$（this.removeClass（'normal'）；}）；}}）；@bijibuji:if（$（'tr'）.hasglass（'selected'））{

只有在页面加载时才会执行。请检查对我答案的更新。谢谢！每件事都很好，只发生了一件奇怪的事情。高亮显示和正常工作反转！！！当我悬停在行上时，它们会变为正常样式，反之亦然。注意：这假设第二个表在开始时就存在，即使它不是p已填充。如果这不正确，则需要将“表”更改为表上方的某个选择器，或者在最坏的情况下更改为文档。如果通过AJAX添加

table2

，则此操作无效。

$（'table'）。on（'mouseout'，'tr:not（.selected'）。removeClass（'highlight'））；

你不能这样做。mouseout似乎不起作用。所有行都保持高亮显示！@Rocket-对，用位代码修复了这个问题。

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

whatever:hover {}