Question

因为可以在jQuery中的一个函数中定义多个事件处理程序，如下所示：

$(document).on({
    'event1': function() {
        //do stuff on event1
    },
    'event2': function() {
        //do stuff on event2
    },
    'event3': function() {
        //do stuff on event3
    },
    //...
});

然后我们可以这样做：

$(document).on('click', '.clickedElement', function() {
    //do stuff when $('.clickedElement') is clicked
});

我想知道是否也可以这样做（下面的代码不起作用，只是为了说明）：

$(document).on('click', {
    '.clickedElement1', function() {
        //do stuff when $('.clickedElement1') is clicked
    },
    '.clickedElement2', function() {
        //do stuff when $('.clickedElement2') is clicked
    },
    //... and so on
});

此代码在'.clickedElementX'之后给出了一个错误抱怨“，”的错误。我也尝试过这样：

$(document).on('click', {
    '.clickedElement1': function() {
        //do stuff when $('.clickedElement1') is clicked
    },
    //... and so on
});

然后我没有错误但也没有执行该功能。有没有办法在这样的地方收集所有点击处理程序，或者我必须像这样一直这样做：

$(document).on('click', '.clickedElement1', function() {
    //do stuff when $('.clickedElement1') is clicked
});
$(document).on('click', '.clickedElement2', function() {
    //do stuff when $('.clickedElement2') is clicked
});
//... and so on

感谢您的帮助！

Answer 1

你可以链接：

$(document).on({
    click: function() {
        //click on #test1
    },
    blur: function() {
        //blur for #test1
    }
}, '#test1').on({
    click: function() {
        //click for #test2
    }
}, '#test2');

FIDDLE

Answer 2

简答：不，你必须将它们全部分开绑定。

答案很长：您可以为您的网站创建“基础架构”，并将所有活动放在一个位置。 e.g。

var App = function(){
  // business logic

  return {
    Settings: { ... },
    Events: {
      'event1': function(){
      },
      'event2': function(){
      },
      'event3': function(){
      }
    }
  }
}();

然后将其连线包括：

$(document).on(App.Events);

然后在内部你可以添加新的绑定到你的App对象，但仍然只在一个地方连接（就jQuery而言）。然后，您可以在App内制作某种订阅者模型（例如App.Subscribe('click', function(){ ... })），并且每个新订阅仍然只通过单.on()绑定进行连接。

但是，恕我直言，这是一个很大的开销，很少有回报。

Answer 3

$(document).on('click' , function(e){
 if($(e.target).hasClass("some-class")){
  //do stuff when .some-class is clicked
 }
 if($(e.target).hasClass("some-other-class")){
  //do stuff when .some-other-class is clicked
 }
});

您可以选择任何您想要的some-class

Answer 4

你可以使用辅助函数：

function oneplace(all){
    for (var query in all){
        $(query).on('click', all[query]);
    }
}

然后致电：

oneplace(
    {'#ele1':function(){
             alert('first function');
         },
     '#ele2':function(){
             alert('second function'); 
         }});

jsfiddle here：http://jsfiddle.net/5zwkf/

Answer 5

真的很容易做到：

$(document).ready(function()
{
     $(this).on('click', '.one, .two',function()
     {
         if ($(this).hasClass('one'))
         {//code for handler on .one selector
             console.log('one');
         }
         else
         {//code for handler on .two selector
             console.log('two');
         }
         console.log(this);//code for both
     });
 });

如果你正在追求多个事件：

$(document).ready(function()
{
     $(this).on('click focus', '.one, .two',function()
     {
         if (event.which === 'click')
         {
             if ($(this).hasClass('one'))
             {
                 console.log('one');
             }
             else
             {
                 console.log('two');
             }
         }
         else
         {
             console.log('focus event fired');
         }
         console.log(this);
     });
 });

玩这个：here's a fiddle

documentation on event
jQuery's on，此处使用delegate

是否可以在一个地方将多个功能绑定到多个委托目标？

5 个答案: