javascript - JS document.on 用于缓存元素

Question

我有这样的代码:

$(document).on("click", "#element_1, #element_2", function() {
  alert("clicked")
})

假设我缓存了 element_1 和 element_2，那么我将如何编写(如果可能)eventHandler？

element_1 = $("#element_1")
element_2 = $("#element_2")

// obviously below fails with a syntax error because an object has been passed rather than a string selector
$(document).on("click", element_1, element_2, function() {
  alert("clicked")
})

Answer 1

您可以使用 .add() 将一个或多个 jQuery 对象合并到一个 jQuery 对象集合中，该集合通过第二个参数传递给 .on()

var element_1 = $("#element_1");
var element_2 = $("#element_2");
var element_3 = $("#element_3");

$(document).on("click", element_1.add(element_2, element_3 /* element_N */)
 , function(e) {
  alert(e.target.id + " clicked")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="element_1">element 1</div>
<div id="element_2">element 2</div>
<div id="element_3">element 3</div>