Question

I wanted something similar to

$('#el1').bind({
    click,function(e){
        alert('clicked on el1');
    },
})
$('#el2').bind({
    click,function(e){
        alert('clicked on el2');
    },
})

when using ‘on’ .
I was looking for something like :

$(document).on({
    click:'el1',function(e){
        alert('clicked on el1');
    },
    click:'el2',function(e){
        alert('clicked on el2');
    }
})

This does not work.

[edited]
I guess I need to be more clear. The different functions have nothing in common. Probably something like this would do :

$(document).on({
    click:'el1',function(e){
        alert('clicked on el1');
    },
    click:'el2',function(e){
        $('body').css('background-color','green');
    }
})

I currently see using switch case solution to be the closest to the one I was looking for.

Answer 1

If your handler functions are unrelated, don’t try to smash them into one. Readability will suffer.

Instead, be clear and attach your handlers separately.

$('#el1').click(function() { ... });
$('#el2').click(function() { ... });

That is instantly recognizable as being two separate, unrelated functions. In the future, it will be easier to maintain and modify this code. Someone new to your code doesn’t have to learn wacky conventions; this is how jQuery is supposed to work.

$('#el1,#el2').click(function() {
    switch (this.id) {
        case 'el1': ... break;
        case 'el2': ... break;
    }
});

Ew.