Question

我想要类似于

的东西

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

使用'on'时。我正在寻找类似的东西：

$(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;
    }
});

的E w

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 */
  }
});

演示：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);
});

我们如何一次“绑定”多个选择器？

4 个答案: