1

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 () {
    // ...
});
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Looks like http://stackoverflow.com/questions/8273202/jquery-add-an-event-handler-to-objects-in-an-array might answer your question. – Palpatim Jul 01 '13 at 14:57
  • Can you post a [SSCCE](http://sscce.org/)/simple [live demo](http://jsfiddle.net/), showing what you're doing, and demonstrating the contsraints? – David Thomas Jul 01 '13 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. http://jsfiddle.net/rD2A7/1/ – Alvaro Jul 01 '13 at 15:21

2 Answers2

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...
    }
});
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 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](http://api.jquery.com/attribute-equals-selector/) for a similar effect. – Corion Jul 01 '13 at 15:10
  • 1
    @Corion, err, no, there is only a single handler bound to `#main`. Where do you see the other ones? – Frédéric Hamidi Jul 01 '13 at 15:11
  • Sorry, misunderstanding on my part. – Corion Jul 01 '13 at 15:16
  • 1
    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. – Dave Methvin Jul 01 '13 at 15:20
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.

Corion
  • 663
  • 3
  • 14