jquery - 加载 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

解决方案

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

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

原来的

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