组合/链接多个jQuery对象

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

- moey

---

为什么不给所有对象添加一个类，并将其用作选择器呢？ $('a.codeA').click(function() { /* 代码A */ }); - Koen Rijpstra

Answer 1

长度只缩短了一点：

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

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

注意：你理论上可以使用混合方法，但它会很冗长：

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

实际上，如果你想避免不停地使用 $a.click(f)，那么这个问题才有用，而这确实比滥用 jQuery 更好。 :)

- Corbin

---

你不需要使用 .each 循环，因为点击事件处理程序已附加到当前集合中的所有元素。请参见此处的第一个示例：http://api.jquery.com/click/ - Alessandro Vendruscolo

哦，你说得对！我总是忘记jQuery选择器返回普通数组。我会进行编辑。 - Corbin

只是一个快速提示，上面的数组语法在链接函数时不起作用（至少在jQuery 1.7.2中），例如jQuery的data函数。因此这个不会起作用：$([$obj1, $obj2]).data("property",true);但这个会起作用：$($obj1, $obj2).data("property",true);希望对某些人有所帮助。 - Phil Ricketts

Answer 2

嗯，总是可以使用.add()方法，但我个人更喜欢逐一编写.click()函数，如果我已经从分离的变量开始了的话。对于这种琐碎的功能，没有必要创建新的jQuery对象来增加额外的开销。

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

- Richard Neil Ilagan

---

$obj1.add($obj2, $obj3) 不起作用，即处理程序不会附加到 $obj3。 示例：http://jsfiddle.net/sikusikucom/VsVcy/ - moey

Answer 3

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

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

- Jonas Høgh

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

最好的部分是：它只有一个处理程序，并且它在父级中。您不会在多个元素上放置多个处理程序。此外，当您修改处理程序时，它会对所有元素生效。无需为每个具有处理程序的元素单独更改处理程序。这里演示

---

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

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

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

- Joseph

---

如果他在容器中有链接，而他不想对其进行操作呢？ - Corbin

他可以将它们添加到第二个参数中，但仍然是单个处理程序。 - Joseph

然后他基本上正在做他说他不想做的事情 :) - Corbin

我所做的和他所做的不同之处在于，他正在为每个处理程序添加处理程序，而我只给父级一个处理程序。 - Joseph

假设 $（'a＃one，a＃two，a＃three'）不是一个选项。如果那不是一个选项，那么$("#parent").on('click', 'a#one...') 也可能不是一个选项。 - Corbin