Как мы связываем 'on' с несколькими селекторами одновременно?

Question

Я хотел что-то похожее на

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

при использовании 'на'. Я искал что-то вроде:

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

Это не работает.

[отредактировано]
Наверное, мне нужно быть более ясным. Различные функции не имеют ничего общего. Возможно, что-то, как это будет делать:

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

Я в настоящее время видим, используя switch case решение, чтобы быть ближе к той, которую я искал.

Answer 1

Если функции вашего обработчика не связаны друг с другом, не пытайтесь их разбить. Читаемость будет страдать.

Вместо этого следует очистить и прикрепить свои обработчики отдельно.

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

Это мгновенно распознается как две отдельные, несвязанные функции. В будущем будет проще поддерживать и изменять этот код. Кто-то, кто не знаком с вашим кодом, не должен изучать дурацкие соглашения; так должно работать jQuery.

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

Ew.

Answer 2

Селектор может быть установлен в вызове метода:

$("body").on("click", "#el1, #el2", function(){ 
alert("clicked on " + $(this).attr("id")); 
}); 

Answer 3

Вы можете комбинировать селекторы, или идти с общим рисунком, и использовать $.on против них:

$("body").on("click", "[id^='el']", function(){ 
    switch (this.id) { 
    case "el1" : 
     /* Do el1 stuff */ 
     break; 
    case "el2" : 
     /* Do el2 stuff */ 
    } 
}); 

Demo: http://jsbin.com/asoqoz/edit#javascript,html

Answer 4

Используйте класс для элементов, а не поиск во всех DOM.

<div id="el1" class="someClass"></div> 
<div id="el2" class="someClass"></div> 

$('.someClass').on('click', function(){ 
    alert("Clicked on " + this.id); 
});