use $(document).on to bind multiple events to the same element

Question

I'm trying to get used to the new proper way of doing things in jQuery but I can't figure out how to do a "live" binding that's as elegant/DRY as the original. Previously, with "live" I believe you could do this, only mentioning the element once:

$("#element_id").live("click",function(){
  //stuff
}).live("mouseover", function(){
  //stuff
}).live("mouseout", function(){
  //stuff
});

Now, with $(document).on it seems I would need to do this:

$(document).on("click","#element_id",function(){
  //stuff
}).on("mouseover","#element_id",function(){
  //stuff
}).on("mouseout","#element_id",function(){
  //stuff
});

This is less concise and repeats the element. Is there an obviously simpler way to achieve this?

Answer 1

$(document).on({
    click: function () {},
    mouseover: function () {},
    mouseout: function () {}
}, '#element_id');

Beware of using document; you may want to use a more specific selector. Also I wouldn't necessarily say it's bad practice to have an ID element loaded dynamically, but it looks suspicious.

Answer 2

I find this approach useful if your callbacks need to share code:

var handler = function ( event ) {

    var $target = $( event.target );

    if ( $target.is( '#element_id' ) ) }

        switch ( event.type ) {
            case 'click':
                // stuff
            break;
            case 'mouseenter':
                // stuff
            break;
            case 'mouseleve':
                // stuff
            break;
        }

    }

};

$( document ).on({
    click: handler,
    mouseenter: handler,
    mouseleave: handler,
});