Jquery On combine

Question

我正在使用这些函数，它们工作得很好：

    $(document).on('click', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('mouseenter', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('mouseleave', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('keydown', '.profile li', function(e) {
            //Alot of cool code
    });

但我想把它们组合成这样：

    $('.profile li').on({
        mouseenter: function (e) {
             //Alot of cool code
        },
        mouseleave: function (e) {
             //Alot of cool code
        },
        click: function (e) {
            //Alot of cool code
        },
        keydown: function (e) {
            //Alot of cool code
        }
    });

但是，由于它们依赖于在dom之后创建的元素，因此组合代码不起作用。所以我的问题是，有没有办法将它们组合成第二种方式，并且仍然让它们与dom之后创建的类一起工作。另外，将它们组合在一起真的有意义吗？我似乎记得读过一些更好的书，但我记不清为什么，或者这是不是一个梦……

Answer 1

只需传递选择器作为第二个参数，请注意，使用最接近的静态父对象比使用document对象更有效。

$(document).on({
    mouseenter: function (e) {
         //Alot of cool code
    },
    mouseleave: function (e) {
         //Alot of cool code
    },
    click: function (e) {
        //Alot of cool code
    },
    keydown: function (e) {
        //Alot of cool code
    }
}, '.profile li');

Answer 2

几天前，我问过一个等效的questions。

我的答案很简单，使用我的变通方法gist。

所以你可以像这样简单地使用它：

$(document).act(
    ['mouseenter', 'selector1', function() {}],
    ['mouseleave', 'selector2', function() {}],
    ['mousedown', 'selector3', function() {}],
    ['mouseup', 'selector4', function() {}]
);

或者甚至是简单的，没有我的脚本：

$(document).on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown: function() {},
    mouseup: function() {}
}, "selector");

但是，这假设您希望对所有这些事件使用相同的选择器。

Answer 3

如果.profile是静态元素，可以尝试这样做：

$('.profile').on({
        mouseenter: function (e) {
             //Alot of cool code
        },
        mouseleave: function (e) {
             //Alot of cool code
        },
        click: function (e) {
            //Alot of cool code
        },
        keydown: function (e) {
            //Alot of cool code
        }
    },'li');​​​​