桌面上的jQuery toggleClass无法正常工作

我试图在鼠标悬停在桌面上时突出显示表格行。所以我使用jQuery的toggleClass()函数。值得一提的是，表格行最初并不存在，它们是在AJAX调用服务器之后创建的，然后插入表中。创建的表行具有class =“table_row”。这是我的代码...桌面上的jQuery toggleClass无法正常工作

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

由于某些原因，它不会工作，没有任何反应。该行不会响应任何事件。下面是我使用创建表元素的代码，而这来自上面的代码之前...

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

来源

2013-06-28 Amoeba

使用代表团动态元素 –

你防止'mouseenter'事件的默认行为的原因吗？ – Ian

尝试使用：

$('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 
}

来源

2013-06-28 20:13:06 Joe

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

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

event-delegation

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

Demo

来源

2013-06-28 20:13:14 PSL

使用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-28 20:16:31

没有足够的jQuery。 ;-) – Ian

您可能需要使用'#mytable> TBODY> TR：hover'（在'>'可能是不重要的），不仅因为他们是专门附加到'tbody'，可能意味着他们是区分和'thead'。可能不太重要 – Ian

@Ian：没错，我会更新。谢谢！ –

桌面上的jQuery toggleClass无法正常工作

回答

相关问题