Jquery hover not working after Ajax content is loaded

Question

I am having an issue where a hover event I have does not work after an ajax load, it only works on initial page load... This is the code I am using currently:

    $(".table tbody tr").hover(
        function () {
            $(this).children('td').children('.operation').children('.btn-group').fadeIn();
        },
        function () {
            $(this).children('td').children('.operation').children('.btn-group').fadeOut();
        }
    );

I know that I need to use the $(document).on() as the selector but I am unsure of the correct syntax to do the functionality as in original code. Any help appreciated

Answer 1

SOLUTION

Poster's own solution from the comments. True, document (or any ancestor that is not affected by the ajax call) must be used.

$(document).on({
    mouseenter: function () {
        $(this).find('.btn-group').fadeIn();
    },
    mouseleave: function () {
        $(this).find('.btn-group').fadeOut();
    }
}, '.table tbody tr');

ORIGINAL

$(".table tbody").on("hover","tr",
    function () {
        $(this).children('td').children('.operation').children('.btn-group').fadeIn();
    },
    function () {
        $(this).children('td').children('.operation').children('.btn-group').fadeOut();
    }
);

EDIT

True, hover is old-school, and doesn't work in this instance I guess! Try this:

$(".table tbody").on({
    mouseenter: function () {
        $(this).children('td').children('.operation').children('.btn-group').fadeIn();
    },
    mouseleave: function () {
        $(this).children('td').children('.operation').children('.btn-group').fadeOut();
    }
},'tr');

And I'm not exactly sure what you're doing, but this might even be shorter:

$(".table tbody").on({
    mouseenter: function () {
        $(this).find('.btn-group').fadeIn();
    },
    mouseleave: function () {
        $(this).find('.btn-group').fadeOut();
    }
},'tr');