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