3

因为可以在 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

感谢您的帮助！

4

5 回答 5

2

您可以链接：

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

小提琴

于 2013-07-17T14:20:15.753 回答
1

简短的回答：不，您必须分别绑定它们。

长答案：您可以为您的网站创建一个“基础设施”，并将所有活动集中在一个地方。例如

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()绑定进行连接。

但是，恕我直言，这是一笔很大的开销，而回报却很少。

于 2013-07-17T14:20:54.877 回答
1 
$(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你想要的

于 2013-07-17T14:21:22.087 回答
0

您可以使用辅助功能：

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在这里：http: //jsfiddle.net/5zwkf/

于 2013-07-17T14:26:15.440 回答
0

这很容易做到，真的：

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

玩这个：这是一个小提琴

关于事件
jQuery 的on文档，在这里使用它就像它是委托一样

于 2013-07-17T14:26:47.163 回答