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

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

如https://stackoverflow.com/a/44031991/430742中所述，您可以使用jQuery＆＃39; s map()从数组中创建jQuery列表对象。然后，此对象可以与.on()一起使用，以将事件绑定到其元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: