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对象合并到第二个参数传递给.on()的单个jQuery对象集合中

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;