Assign an event handler to all elements of an array without using for or each (jQuery)

Question

I know I can assign an event handler to an html element or class so that if new elements are loaded dynamically the event will still fire to the new added elements. For example:

$('#main').on('click','a.link_class', function () {
    // ...
});

I have elements to which I apply a plugin function and then contain those in an array. Then I need to assign an event to this array elements (specifically to them,not to a class they have in common). Is there any way to do this avoiding using for loop or each() (so that new elements added lately to the array still fire with the event)? A simple way like the above example? Something like:

$('#main').on('plugin_event',array, function () {
    // ...
});

or...

$('#main').on('plugin_event',array[i], function () {
    // ...
});

Looks like stackoverflow.com/questions/8273202/… might answer your question. — Palpatim
– Palpatim, Commented Jul 1, 2013 at 14:57
Can you post a SSCCE/simple live demo, showing what you're doing, and demonstrating the contsraints? — David Thomas
– David Thomas, Commented Jul 1, 2013 at 15:01
I just realised there is some kind of problem with the plugin. Here is a fiddle I was going to update that shows what I mean. jsfiddle.net/rD2A7/1 — Alvaro
– Alvaro, Commented Jul 1, 2013 at 15:21

Frédéric Hamidi · Accepted Answer · 2013-07-01 15:04:37Z

2

You will have to keep track of the array, and check in your handler that the current event target is present in that array.

You can use data() to achieve the former:

$("#main").data("plugin-array", yourArray);

You can then implement the latter with $.inArray():

$("#main").on("plugin_event", function(e) {
    if ($.inArray(e.target, $(this).data("plugin-array")) >= 0) {
        // Target element is present in the array, handle the event...
    }
});

answered Jul 1, 2013 at 15:04

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

4 Comments

Corion Over a year ago

This would bind the event to every single object in your DOM, would it not? Seems like overkill. I'm curious about performance differences between a data variable to using a CSS class though. I think you can make a jQuery selector on the data attribute for a similar effect.

Frédéric Hamidi Over a year ago

@Corion, err, no, there is only a single handler bound to #main. Where do you see the other ones?

Corion Over a year ago

Sorry, misunderstanding on my part.

Dave Methvin Over a year ago

Very good solution! Essentially this is just event delegation but using the array of elements to decide whether to handle the event. Just be sure to remove the element from plugin-array if/when it is not needed so the DOM element won't leak.

Corion · Accepted Answer · 2013-07-01 15:00:57Z

0

When initially creating the array you could instead add a unique CSS class to each of them. This would allow you to use a jQuery selector to return all the elements and bind the additional behavior to them all at once.

If you need to add or remove elements from the array you could add or remove the class from the elements. You can cache the results of the jQuery selector for similar performance to the array you're using.

answered Jul 1, 2013 at 15:00

Corion

6633 silver badges14 bronze badges

Collectives™ on Stack Overflow

Assign an event handler to all elements of an array without using for or each (jQuery)

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related