javascript - 多个元素变量上的 jQuery 事件处理程序

Question

这样的事情可能吗？我有多个变量设置为 DOM 元素。我不想再次点击 DOM 来设置事件处理程序，而是想使用已经设置的变量。

var a = $("#foo");
var b = $("#bar");

a,b.on("click", function() {

});

Answer 1

解决方案#1

您可以使用.add()链接缓存的元素。

var a = $("#foo");
var b  = $("#bar");

(a).add(b).on("click", function() {
  alert('Handler registered');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">Foo</button>
<button id="bar">Bar</button>

解决方案#2

当您处理多个缓存元素时，正如 Barmar 建议的那样，更优雅的解决方案是将它们作为数组传递给 $()。

但是，请注意仅传入缓存的 jQuery 对象的第一项，以便您实际上针对的是 DOM 元素本身，而不是 jQuery 包装对象。

var a = $("#foo");
var b = $("#bar");
var c = $("#biz");


$([a[0], b[0], c[0]]).on("click", function() {
  alert('Handler registered');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">Foo</button>
<button id="bar">Bar</button>
<button id="biz">Biz</button>