将 jquery 事件绑定到 jquery 对象数组

Question

我有一个包含 jquery 个对象的数组，稍后在代码的各个部分引用这些对象。我将它们放入一个数组中，这样它们只被 selected 一次，而不是每次我需要访问它们时都执行 jquery select。

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

我曾经在元素的ID上做一个jquery select然后绑定事件：

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

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

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

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

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

Answer 1

可以遍历它们：

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

由于 bind() 在内部使用 on() 我改用 on()。

另一种方法是只存储选择器

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

我认为这有助于理解您是如何创建这个数组的。可能还有其他方法，具体取决于用途和您要完成的目标

Answer 2

如中所述，您可以使用 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>

将 jquery 事件绑定到 jquery 对象数组

Bind a jquery event to an array of jquery objects

jquery

jquery-events