将事件处理程序分配给数组的所有元素，而不使用 for 或 each (jQuery)答案

【问题标题】：Assign an event handler to all elements of an array without using for or each (jQuery)将事件处理程序分配给数组的所有元素，而不使用 for 或 each (jQuery)
【发布时间】：2013-07-01 14:54:30
【问题描述】：

我知道我可以将事件处理程序分配给 html 元素或类，这样如果动态加载新元素，事件仍会触发新添加的元素。例如：

$('#main').on('click','a.link_class', function () {
    // ...
});

我有元素应用插件函数，然后将它们包含在数组中。然后我需要为这个数组元素分配一个事件（特别是给他们，而不是给他们共同的类）。有什么方法可以避免使用 for 循环或 each() （这样最近添加到数组中的新元素仍然会随着事件触发）？像上面的例子一样简单的方法？比如：

$('#main').on('plugin_event',array, function () {
    // ...
});

或者...

$('#main').on('plugin_event',array[i], function () {
    // ...
});

【问题讨论】：

看起来stackoverflow.com/questions/8273202/… 可能会回答你的问题。
你能发一个SSCCE/simple live demo，展示你在做什么，并展示限制吗？
我刚刚意识到插件存在某种问题。这是我要更新的小提琴，它显示了我的意思。 jsfiddle.net/rD2A7/1

标签： jquery arrays events each

【解决方案1】：

您必须跟踪数组，并在您的处理程序中检查当前事件目标是否存在于该数组中。

可以使用data()实现前者：

$("#main").data("plugin-array", yourArray);

然后您可以使用$.inArray() 实现后者：

$("#main").on("plugin_event", function(e) {
    if ($.inArray(e.target, $(this).data("plugin-array")) >= 0) {
        // Target element is present in the array, handle the event...
    }
});

【讨论】：

这会将事件绑定到 DOM 中的每个对象，不是吗？好像有点矫枉过正。我很好奇数据变量与使用 CSS 类之间的性能差异。我认为您可以制作jQuery selector on the data attribute 以获得类似的效果。
@Corion，错误，不，只有一个处理程序绑定到#main。你在哪里看到其他的？
对不起，我的误会了。
非常好的解决方案！本质上，这只是事件委托，但使用元素数组来决定是否处理事件。只要确保在不需要时从插件数组中删除元素，这样 DOM 元素就不会泄漏。

【解决方案2】：

最初创建数组时，您可以改为为每个数组添加一个唯一的 CSS 类。这将允许您使用 jQuery 选择器来返回所有元素并一次将附加行为绑定到它们。

如果您需要从数组中添加或删除元素，您可以从元素中添加或删除类。您可以缓存 jQuery 选择器的结果，以获得与您正在使用的数组类似的性能。

【讨论】：