dannybrady dannybrady - 4 months ago 58
jQuery Question

Jquery hover not working after Ajax content is loaded

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

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');