用于缓存元素的 JS document.on

【问题标题】：JS document.on for cached element用于缓存元素的 JS document.on
【发布时间】：2017-11-09 14:55:03
【问题描述】：

我有这样的代码：

$(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")
})

【问题讨论】：

标签： javascript jquery caching

【解决方案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>

【讨论】：