Question

I have created a table which is populated by JSON data so each row in the table. The table layout is
<table id="custServMainTable">
<tbody>
</tbody>
</table>


I append the elements with JQuery with code located in the bottom of page by

$('#custServMainTable tbody').append("<tr class='custCell grey'>
<td>info</td></tr>");

The appending of the elements works fine. The issue that I’m having is that when I try to run a hover to change the background color by

$('.grey').hover(function() {
        $(this).css('background-color', '#FDBB73');}, 
        function() {$(this).css('background-color', '#EFEFEF');
    });

methods tried

 $('.grey').on("hover", function(event) {
        $(this).css('background-color', '#FDBB73');}, 
        function() {$(this).css('background-color', '#EFEFEF');
    });

I am trying to highlight a row when it is hovered on. It does not work with the methods I’ve tried. I have this previously working with the same code with static creation of the table. I have tried “on” and “bind” with the hover function with no luck. Ohter example of similar situation suggested using live, which is now deprecated. One suggested had been to move the “on” up one level but that did not yield any success.

Answer 1

.on() doesn’t have a hover option. You may want to try:

$('body').on('mouseenter', '.grey', function() {
   $(this).css('background-color', '#FDBB73');}
});
$('body').on('mouseleave', '.grey', function() {
   $(this).css('background-color', '#EFEFEF');
});