jQuery .on() delegated mouseenter and mouseleave

Question

What's the best way to delegate multiple events using .on()?

This is the syntax for one delegated event:

$(document).on('mouseeenter','.foo', function(){});

And here is the syntax for multiple events (not delegated):

$('.foo').on({
    mouseenter: function(){
        //stuff
    },
    mouseleave: function(){
        //stuff
    }
});

I was wondering if there was a more succinct way to do this other then:

$(document).on('mouseenter', '.foo', function(){})
           .on('mouseleave', '.foo', function(){});

It's not a big deal if I have to do it that way, I'm more curious about it than anything.

No problem. According to comments in the other question, it is not easy to search for this topic in the first place. — Frédéric Hamidi, Mar 08 '13 at 14:22

score 39 · Accepted Answer · answered Mar 08 '13 at 14:15

39

$(document).on({
    mouseenter: function(){
        //stuff
    },
    mouseleave: function(){
        //stuff
    }
}, '.foo');

answered Mar 08 '13 at 14:15

Ram

1

This is better than live() which is deprecated for new versions :) – Lauris Kuznecovs Feb 21 '15 at 22:11

1 Answers1