Question

var $obj1 = $('a#one');
var $obj2 = $('a#two');
var $obj3 = $('a#three');

// Assume $('a#one, a#two, a#three') wasn't an option.

如何指定一个（相同的）事件处理程序，例如click()这三个jQuery对象？基本上，我正在寻找一种更有效的方法：

$obj1.click(function() { /* Code A */ });
$obj2.click(function() { /* Code A */ });
$obj3.click(function() { /* Code A */ });

Answer 1

仅（非常）略微缩短，但是：

$([$obj1, $obj2, $obj3]).click(function() { });

你可能想要在第一个匿名函数之外定义你的处理程序，所以你可能最好用Jonas H的方法。只是抛出另一个建议。

注意：你可以在技术上做混合动力，但它很长：

var f = function() { };
$([$obj1, $obj2, $obj3]).click(f);

真的这个问题只有在你想要一遍又一遍地避免使用$ a.click（f）时才有用，这真的是比jQuery滥用更好的选择。：）

Answer 2

嗯，总是.add()，但我个人更喜欢逐个写出.click()函数，如果我开始使用单独的变量。无需额外的开销来为这些简单的功能创建新的jQuery对象。

$obj1.add($obj2).add($obj3).on('click' , function () { } );
// not sure if $obj1.add($obj2, $obj3) will work as well

Answer 3

var myFunction = function() { /* Code A */ };

$obj1.click(myFunction);
$obj2.click(myFunction);
$obj3.click(myFunction);

Answer 4

获取一个公共父容器并在其上使用jQuery .on()。

<div id="parent">
    <a href="#" id="one">1</a>
    <a href="#" id="two">2</a>
    <a href="#" id="three">3</a>
</div>

//any <a> clicked under parent executes this function
$('#parent').on('click','a#one, a#two, a#three',function(){
    //do stuff
});

最好的部分是：它只是一个处理程序，它位于父级中。你没有在多个元素上放置多个处理程序。另外，当您修改处理程序时，它会对所有人生效。无需为拥有它的每个元素单独更改处理程序。 demo here

http://api.jquery.com/on/

除了能够处理尚未创建的后代元素上的事件之外，委派事件的另一个优点是，当必须监视许多元素时，它们可能会有更低的开销。在其tbody中包含1,000行的数据表中，此示例将处理程序附加到1,000个元素：

委托事件方法仅将事件处理程序附加到一个元素，即tbody，并且事件只需要冒出一个级别（从点击的tr到tbody）

组合/链接多个jQuery对象

4 个答案: