jquery on('click')处理程序,用于vars引用的多个元素

时间:2013-11-28 23:32:27

标签: javascript jquery event-handling

N.B。我知道我添加了id并将它们组合在一个选择器中,例如“#myDiv1,#myDiv2”所以请不要提出这个建议,因为它与我的问题无关。

有没有办法在一个on()声明中将下面的变量“链接”在一起,可能是一个数组还是什么?

var myDiv1 = $('<div>Something here</div>');
var myDiv2 = $('<div>Something else here</div>');

myDiv1.on('click', function(){ doSomething();});
myDiv2.on('click', function(){ doSomething();});

我有一堆vars,我需要对鼠标事件做一些广泛的跟踪,并且像上面的例子那样单独设置它们会感觉很乱。

1 个答案:

答案 0 :(得分:6)

  • 您可以将 DOM元素数组传递给jQuery函数

    $([
        myDiv1.get(0), 
        myDiv2.get(0)
    ]).on('click', function(){ doSomething();});
    

    jsFiddle Demo

  • 另一种可能的方法是使用 .add()方法

    myDiv1.add(myDiv2).on('click', function(){ doSomething();});
    

    jsFiddle Demo

  • 将它们放在数组中,循环遍历并附加相同的处理程序。我使用ES5 forEach制作了示例,但您可以使用简单的for循环或$.each

    [cucc, gomb].forEach(function (el) {
        el.on('click', handler);
    });
    

    jsFiddle Demo

  • 如果他们有共同的祖先,请在他们身上放置一个公共课程并使用事件委托。根据元素的数量,这可能是性能最佳的解决方案,因为您只需将一个处理程序附加到共同的祖先。

    $('.ancestor').on('click', '.common', handler);
    

    jsFiddle Demo