How can I assign JQuery click handlers via iteration?

Question

I have this code which can be seen Here. The idea would be that I could have a list of items, which I could then assign a handler to run whatever repetitive code I would need to run (for example, a function which modifies a series of classes). The idea is that I could iterate through a list of ids and assign a handler, however due to my limited knowledge of Javascript, it doesn't' appear to be working. Would anyone be able to help?

The Code of Interest:

HTML:

<a href="#" id="first">First</a><br>
<a href="#" id="second">Second</a><br>
<a href="#" id="third">Third</a><br>
<a href="#" id="forth">Forth</a><br>

Javascript:

//Choose which ids I want to iterate
ids = ['#first', '#second', '#third', 'forth']

//For all the ids there are
for ( i=0; i<ids.length; i++ ) {

    //Select an item
    item = ids[i]

    //Add a click handler to that item
    $( item ).click(function() {

          //Run a function that involves knowing the item I have iterated...
          alert( "Handler for "+ item + " called." );
    });
}

Thanks,
Aj.

First off, I'm with @A.Wolff, I don't think you'll need iteration. Anyway, the element that the handler is attached to is available in a variable named "this" in your handler function — Clayton Leis, Oct 13 '14 at 18:14
Because in my situation @A.Wolff I have a list of buttons, of which when I press one, it will make all the other buttons 'deactivated' and my selected class 'active' via changing applying classes. Hope that helps. :) — user39991, Oct 13 '14 at 18:16
Like @ClaytonLeis said, then use `this` inside handler. Smells like an xy problem to me http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — A. Wolff, Oct 13 '14 at 18:17
There doesn't seem to be a need for a loop, but the problem you are experiencing is http://stackoverflow.com/q/750486/218196. Since you didn't seem to be aware of `this`, I recommend to read the jQuery tutorial: http://learn.jquery.com/events/event-basics/ — Felix Kling, Oct 13 '14 at 18:18
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Oct 13 '14 at 18:20

fallenland · Answer 1 · 2014-10-13T18:38:22.003

This will not work as expected because you're assigning to a global item. Since, javascript has only globals and function locals, saying

var item = ids[ i ];

will not work either. You could jQuery's each method to iterate over your array:

$.each( ids, function( index, value ) {
  $( value ).click( function() { } );
} );

or, wrap your item in a function this way:

for( i=0; i<ids.length; i++ ) {
  (function(value) {
    $( value ).click(function() { });
  })( ids[i] )
}

you could also just do this

$( ids.join( ',' ) ).click( function(e) {
  // No variable "item" available here
  // access the target element by $(this) or $(e.target)
} );

I believe that `$.each()` example will result in each click event causing 4 alerts. Might want to throw it into a snippet to verify... — Troy Gizzi, Oct 13 '14 at 18:32

score 0 · Answer 2 · answered Oct 13 '14 at 18:30

Here's a snippet with the bare minimum changes necessary to fix the two problems.

Problem #1: Missing the # before forth in the ids array.
Problem #2: Need to use this instead of item in the click handler.

//Choose which ids I want to iterate
ids = ['#first', '#second', '#third', '#forth']

//For all the ids there are
for ( i=0; i<ids.length; i++ ) {

    //Select an item
    item = ids[i]

    //Add a click handler to that item
    $( item ).click(function() {

          //Run a function that involves knowing the item I have iterated...
          alert( "Handler for "+ this.id + " called." );
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="first">First</a><br>
<a href="#" id="second">Second</a><br>
<a href="#" id="third">Third</a><br>
<a href="#" id="forth">Forth</a><br>

How can I assign JQuery click handlers via iteration?

2 Answers2