2

当鼠标悬停在表格行上时，我试图突出显示它。所以我正在使用jQuery的toggleClass()功能。值得一提的是，表行最初并不存在，它们是在对服务器进行 AJAX 调用之后创建的，然后插入到表中。创建的表行有一个 class="table_row"。这是我的代码...

$('.table_row').hover( function() {
    event.preventDefault();
    $(this).toggleClass('highlighted');
});

由于某种原因它不起作用，没有任何反应。该行不会响应任何事件。这是我用来创建表格元素的代码，它位于上述代码之前......

$('tbody').prepend(
    '<tr class="table_row"><td>' + results + '</td></tr>'
});
4

3 回答 3

4

尝试使用：

$('tbody').on('mouseenter mouseleave', '.table_row', function() {
    $(this).toggleClass('highlighted');
});

这用于.on()为所有现有和未来.table_row元素设置事件处理程序。为和事件.hover()绑定处理程序，因此这将与之前的工作方式相同。mouseentermouseleave.hover()

您还可以考虑使用 CSS:hover伪类。.highlighted但是，如果您需要重用该类，这可能不是您想要的。这是一个例子：

tbody > tr.table_row{ /* regular styles */}
tbody > tr.table_row:hover{
    // the current styles you have in .highlighted
}
于 2013-06-28T20:13:06.637 回答
3

尝试对动态创建的元素使用事件委托。您的悬停事件仅绑定到该时间点存在的元素，因为您在运行时附加它们，您需要为新添加的行再次绑定事件或使用 eventdelegation 让您的容器将事件委托给动态行时可用。

$('yourtableselector').on('mouseenter mouseleave', '.table_row',  function() {
    $(this).toggleClass('highlighted');
});

事件委托

hover是一个虚拟事件的组合mouseenter/mouseleave。

演示

于 2013-06-28T20:13:14.903 回答
3

使用 CSS 而不是 JavaScript 对悬停事件进行简单的样式更改。

#my_table > tbody > tr:hover {
    background: yellow;
}

但如果您确实使用 JavaScript，我建议您创建元素并直接绑定到它。

由于鼠标移动时悬停事件发生得如此频繁，我希望处理程序尽可能靠近元素。

$('<tr class="table_row"><td>' + results + '</td></tr>')
    .hover( function() {
        event.preventDefault();
        $(this).toggleClass('highlighted');
    })
    .appendTo("tbody");
于 2013-06-28T20:16:31.193 回答