Bind a jquery event to an array of jquery objects

Question

I have an array containing jquery objects which are later referenced in various parts of the code. I put them into an array so that they are only selected once, rather than doing a jquery select every time I need to access them.

My question is, how can I bind a jquery event to an array of these jquery objects?

I used to do a jquery select on the IDs of the elements and then bind the event:

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

Now I have this array of jQuery objects. How can I bind these to a jquery event?

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

I tried doing this, but it didn't work:

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

I'd of course question why these are stored as jQuery objects in the array rather than just dom elements. Or why the array isn't itself a jQuery object containing just the dom elements. — user400654
– user400654, Commented Sep 28, 2015 at 18:34
I wanted to avoid having to keep doing a jQuery select on these elements over and over again and opted for doing the select once, and storing the jQuery objects in an array. They are jQuery objects because jQuery commands are performed on them throughout the code. — AndeeC
– AndeeC, Commented Sep 28, 2015 at 20:53

charlietfl · Accepted Answer · 2015-09-28 18:42:44Z

8

Can loop over them:

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

Since bind() uses on() internally I switched to use on() instead.

An alternative would just store selectors

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

I think it would help to understand how you even arrived at getting this array created. There are likely other approaches depending on use and what you are trying to accomplish

edited Sep 28, 2015 at 18:42

answered Sep 28, 2015 at 18:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

AndeeC Over a year ago

Thanks. I had considered looping through them as well, but I just wasn't sure if there was a better way to do it, so I thought I'd ask.

AndeeC Over a year ago

I prefer not to store just the selectors (per your 2nd suggestion) because I am using these jquery objects in other parts of the code as well. So in order to avoid having to keep doing a jquery select on these elements every time I want to access them, I'm storing the jquery objs in an array once, and then accessing those objects throughout the code.

charlietfl Over a year ago

but how is array created? Might be simpler leaving it in jQuery object stored as variable

AndeeC Over a year ago

Can you clarify what you mean by leaving it in a jQuery object stored as a variable?

charlietfl Over a year ago

if you use $('#id1,#id2').doSomething() and want to use those again you can store that in a variable ... var $items = $('#id1,#id2').doSomething(); then later on you can do $items.anotherThing()

|

Jpsy · Accepted Answer · 2017-05-29 07:40:34Z

4

As explained in https://stackoverflow.com/a/44031991/430742 you can use jQuery's map() to create a jQuery list object from your array. This object can then be used with .on() to bind events to its elements.

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>

answered May 29, 2017 at 7:40

Jpsy

21.1k7 gold badges123 silver badges120 bronze badges

Collectives™ on Stack Overflow

Bind a jquery event to an array of jquery objects

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related