Slickgrid, change row color on hover

Question

I have a slickgrid grid that I want to change the rows background color on rows hover. I tried this:

$(".slick-row").mouseenter(function(){ 
    $(this).css("background-color","red"); 
}).mouseleave(function(){ 
    $(this).css("background-color","white"); 
});

but it's not working. Is there a way to do it?

Answer 1

Since you are using slickgrid the target rows will be dynamic so use event delegation to register the event handlers.

$(document).on('mouseenter', ".slick-row", function () {
    $(this).css("background-color", "red");
}).on('mouseleave', ".slick-row", function () {
    $(this).css("background-color", "white");
});

Also change the selector $(document) to a more specific one.