将 jQuery 事件绑定到一个 jQuery 对象数组上。

Question

我有一个包含jQuery对象的数组，它们将在代码的不同部分中被引用。我把它们放入一个数组中，这样每次访问它们时就不必再进行jQuery选择，而只需要选择一次。

我的问题是，如何将jQuery事件绑定到这些jQuery对象的数组上？

我以前是通过对元素ID进行jQuery选择，然后绑定事件来实现：

$('#name, #domain, #description').bind("blur change", 
function () { 
    callEventHandler(this); 
});

现在我有一个 jQuery 对象数组。如何将它们绑定到 jQuery 事件？

var jqObjs = [$('#name'), $('#domain'), $('#description')];      

我尝试过这样做，但没有成功：

$(jqObjs).bind("blur change", 
function () { 
    callEventHandler(this); 
});

- AndeeC

---

当然，我会质疑为什么这些被存储为jQuery对象而不是DOM元素的数组。或者为什么数组本身不是一个包含DOM元素的jQuery对象。 - Kevin B

我想避免反复在这些元素上进行jQuery选择，选择了一次性地进行选择，并将jQuery对象存储在一个数组中。它们是jQuery对象，因为整个代码中都会对它们执行jQuery命令。 - AndeeC

Answer 1

你可以遍历它们：

可以循环遍历它们：

$(jqObjs).each(function(_, jQobj){
    jQobj.on("blur change",function () { 
       callEventHandler(this); 
    });
});

自从`bind()`内部使用`on()`后，我就改用`on()`。

另一种选择是仅存储选择器。

var jqSelectors = ['#name', '#domain', '#description'];
$(jqObjs.join()).on('...

我认为了解你是如何创建这个数组的将有助于理解。根据用途和你想要实现的目标，可能会有其他方法可供选择。

- charlietfl

---

谢谢。我之前也考虑过用循环来解决这个问题，但是我不确定是否有更好的方法，所以想问一下。 - AndeeC

我更喜欢不仅仅存储选择器（根据您的第二个建议），因为我还在代码的其他部分使用这些jquery对象。所以为了避免每次想要访问它们时都要进行jquery选择，我一次将jquery objs存储在一个数组中，然后在整个代码中访问这些对象。 - AndeeC

如果你使用 $('#id1,#id2').doSomething() 并且希望再次使用，可以将其存储在一个变量中... var $items = $('#id1,#id2').doSomething(); 然后稍后可以执行 $items.anotherThing()。 - charlietfl

将集合缓存以避免再次搜索相同的内容是众所周知的... 但是...需要确保如果它是一类可能在其中添加/删除元素的类，则缓存版本将包括代码运行时存在的所有元素，而不是未来的元素。 - charlietfl

明白了，你的意思是将所有元素分组到一个jQuery选择语句中，并将其存储到一个变量中。然后我可以在整个代码中使用该变量。这将完美地解决问题。但是，在这种特殊情况下，我需要将事件绑定到这四个元素中的所有元素。其余的代码分别应用于这些元素中的每个元素，因此我不能继续在一个变量中使用它们。所以我需要将它们分开成自己的jQuery对象。 - AndeeC

Answer 2

如https://dev59.com/EHrZa4cB1Zd3GeqP4p6H#44031991所解释的那样，你可以使用jQuery的map()将数组转换为jQuery列表对象。然后，可以使用.on()来绑定事件到其元素上。

var jqObjs = [$('#name'), $('#domain'), $('#description')];

var listObj = $.map(jqObjs, function(el){return el.get()});
$(listObj).on('click', function(ev){
 console.log('EVENT TRIGGERED');
});

button{
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="name">Button 'name'</button>
<button id="domain">Button 'domain'</button>
<button id="description">Button 'description'</button>

- Jpsy