Binding multiple events to elements stored in variable

Question

I know that puting reference of HTML element into the variable is a good practice if I need to reference to this element many times. But I run into the problem with this while making my project. How can I bind multiple and the same events to the elements which are stored into the variable?

For now I deal with it this way:

var producerEl = $("#js-producer");
var brandEl = $("#js-brand");
var seriesEl = $("#js-series");

bind(seriesEl);
bind(brandEl);
bind(seriesEl);

function bind($el) {
    $el.on("keypress", function () {
       // some code..
    });
}

I need something like $(producerEl, brandEl, seriesEl).on...

Dastagir · Accepted Answer · 2014-06-14 19:48:41Z

1

var producerEl = $("#js-producer");
var brandEl = $("#js-brand");
var seriesEl = $("#js-series");

  producerEl.add(brandEl).add(seriesEl).on("click", function () {
        alert('hello');
    });

edited Jun 14, 2014 at 19:48

answered Jun 14, 2014 at 19:41

Dastagir

1,0129 silver badges14 bronze badges

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

Comments

David Smith · Accepted Answer · 2014-06-14 19:30:03Z

0

If you are trying to keep your code readable, might I suggest this approach?

$("#js-producer, #js-brand, #js-series").on('keypress', function () { });

answered Jun 14, 2014 at 19:30

David Smith

916 bronze badges

3 Comments

webrama.pl Over a year ago

No. I want use references I have in variables and don't find it second time (performance!).

David Smith Over a year ago

Your approach doesn't improve performance one bit. It's purely for readability.

GillesC Over a year ago

jQuery has a cache system built it so I believe once queried even if you use the CSS selector again it will be fine.

Nico · Accepted Answer · 2014-06-14 20:08:45Z

0

Hmm. If you're using these selectors only one, don't care about "I know it is good to". The best solution is the one provided by David Smith.

Anyway, jQuery is using the sizzle selector engine, who has it's own cache. You can ask for $("#js-producer, #js-brand, #js-series")

the result would be cached and reused.

answered Jun 14, 2014 at 20:08

Nico

2632 silver badges15 bronze badges

1 Comment

webrama.pl Over a year ago

The question is just a exmaple. I use these selectors many times.

Collectives™ on Stack Overflow

Binding multiple events to elements stored in variable

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related