表上的 jQuery toggleClass 不起作用答案

【问题标题】：jQuery toggleClass on a table not working表上的 jQuery toggleClass 不起作用
【发布时间】：2013-06-28 20:09:46
【问题描述】：

当鼠标悬停在表格行上时，我试图突出显示该行。所以我使用 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>'
});

【问题讨论】：

对动态元素使用委托
有什么理由阻止mouseenter 事件的默认行为？

标签： javascript jquery html-table hover

【解决方案1】：

尝试使用：

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

这使用.on() 为所有现有和未来的.table_row 元素设置事件处理程序。 .hover() 为 mouseenter 和 mouseleave 事件绑定处理程序，因此这将与 .hover() 一样工作。

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

tbody > tr.table_row{ /* regular styles */}
tbody > tr.table_row:hover{
    // the current styles you have in .highlighted
}

【讨论】：

【解决方案2】：

使用 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");

【讨论】：

您可能想使用#mytable > tbody > tr:hover（> 可能并不重要）只是因为它们专门附加到tbody，可能暗示它们正在区分它和thead .可能不太重要
我认为这是要走的路...+1
非常关于经常发生的事件你应该keep the handler as close to the element as possible

【解决方案3】：

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

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

event-delegation

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

Demo

【讨论】：