为什么Javascript函数不适用于元素？ [关闭]答案

【问题标题】：why Javascript function wont apply to element? [closed]为什么Javascript函数不适用于元素？ [关闭]
【发布时间】：2012-05-31 20:49:37
【问题描述】：

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

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

任何帮助将不胜感激。

【问题讨论】：

发布 JavaScript 代码
您需要添加更多代码。发布您所指的脚本。
请包含实际的表格html和相关的css

标签： javascript jquery ajax hover tablerow

【解决方案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');
        }
    });
});

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

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

附：您可以将所有$( function() { 组合在一起。

【讨论】：

感谢您的回复。请让我知道使用 jquery .on 时使用什么来代替悬停和鼠标悬停
@bijibuji：和我发的一样，把'click'改成'hover'或者'mouseout'就行了。
有什么问题？！
@bijibuji：if($('tr').hasClass('selected')) { 仅在页面加载时执行。检查我的答案的更新。
谢谢！每件事都运作良好，只是发生了一件奇怪的小事。高光和正常工作相反！！！当我将鼠标悬停在行上时，它们会变为正常样式，反之亦然

【解决方案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');
});

【讨论】：

注意：这假设第二个表在开始时存在，即使它没有填充。如果这不正确，您需要将“表格”更改为表格上方的某些选择器 - 或者在最坏的情况下记录。
如果table2是通过AJAX添加的，这将不起作用。
$('table').on('mouseout','tr:not(".selected")').removeClass('highlight'); 你不能那样做。
mouseout 似乎不起作用。所有行都保持突出显示！
@Rocket - 对，用位代码解决了这个问题。

【解决方案3】：

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

whatever:hover {}

【讨论】：