Question

CSS

.ItemRowHover td {background-color:#ff9900; }

的JScript

$('.items').tablesorter();

// these two mouse events work unless the sorting is done,
// as soon as the table is sorted by clicking any of the header columns, these cease working.

$('.items tr').each(function(){ 
  $(this).bind('mouseover', function(){ 
    $(this).addClass('ItemRowHover');  
  }); 
});


$('.items tr').each(function(){
  $(this).bind('mouseout', function(){
    $(this).removeClass('ItemRowHover'); 
  }); 
});

在按任何列对表进行排序后，悬停jQuery停止工作，但在第一次加载页面时工作，并且通过单击任何标题对表进行未排序。

Answer 1

为什么不改变这样的选择器？

试试这个：$('tr.items')

$(document).ready(function () {
    $("#myTable").tablesorter();
    $('td.items').hover(function () {
        $(this).addClass("ItemRowHover");
    }, function () {
        $(this).removeClass("ItemRowHover");
    });
});

同时将您的Css更改为

td.ItemRowHover {background-color:#ff9900; }

如果您只想在悬停时更改td的背景，请仅使用CSS。 不需要jQuery

假设表格为tblData，那么CSS应为

#tblData tr:hover
{
   background-color:#ff9900; 
}

Fiddle Demo with CSS

Fiddle Demo with JS

Answer 2

尚未测试此代码，这可能无法解决您的根问题，但您应能够以更简单的方式执行此操作，因为一个语句使用hover()但没有each()个功能。

$('.items tr').hover(function(){
    $(this).addClass('ItemRowHover'); 
}, function(){
    $(this).removeClass('ItemRowHover'); 
});

编辑：根据评论中的讨论，还有一些（未经测试的）代码

$('.items').on("mouseover", "tr", function(){
    $(this).addClass('ItemRowHover');
}).on("mouseout", "tr", function(){
    $(this).removeClass('ItemRowHover'); 
});

如果要将事件附加到的元素动态添加到DOM，则必须使用on()。在内部（对于jQuery），它将事件侦听器设置为始终存在的元素。（上例中的.items），然后通过称为“事件冒泡”的DOM概念访问on函数的第二个参数（上例中的"tr"）这是所有来自记忆，可能有点困惑或错误。一对谷歌应该提供更多信息。

Answer 3

试试这个例子：

$('.items').tablesorter();

var $rows = $('.items tr');
$rows.hover(function () {
    $(this).addClass("rowHover");
}, function() {
    $(this).removeClass("rowHover");
});
Then create the stylesheet rule for zebra rows being hovered:

.even.rowHover,
.odd.rowHover {
    background-color: #F0F0F0;
}

Tablesorter：在桌面上应用排序后，鼠标悬停不起作用

3 个答案: