加载Ajax内容后，Jquery悬停不起作用

Question

我遇到一个问题，我的悬停事件在ajax加载后无效，它只适用于初始页面加载...这是我目前使用的代码：

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

我知道我需要使用$（document）.on（）作为选择器，但我不确定正确的语法来执行原始代码中的功能。任何帮助表示赞赏

Answer 1

<强>解

来自comments的海报自己的解决方案。是的，必须使用document（或任何不受ajax调用影响的祖先）。

$(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();
    }
);

修改

是的，hover是老派，我猜这个例子不起作用！ 试试这个：

$(".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');

而且我不确定你在做什么，但这可能会更短：

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