Question

Basic question, but I have been pounding my head for a bit so thought id bring it here.

html looks like this (edit, fixed the closing quotes)

<span class='deleteimage-119'>delete</span>
<span class='deleteimage-120'>delete</span>
<span class='deleteimage-121'>delete</span>
<span class='deleteimage-122'>delete</span>
<span class='deleteimage-123'>delete</span>

javascript/jquery looks like this

iids = ['119','120','121','122','123'];
for (i=0; i<iids.length; i++) {
        place = iids[i];
        $(".deleteimage-" + place).click(function () {
                alert(place);
             });
    }

The click functionality gets attached to each individual span, but the alert after clicking just shows the last item in the array.

Answer 1

You have a scoping issue. By the time the callback fires, place has the last value from the loop.

You need to create a new variable for the closure; one variable per iteration, each of which will then be “caught” by the closure and used in the callback.

It would be nice if the solution were this:

var iids = ['119','120','121','122','123']; // don't forget `var` please
for (var i=0; i<iids.length; i++) {
   var place = iids[i]; // local variable?
   $(".deleteimage-" + place).click(function () {
       alert(place);
   });
}

Alas, Javascript has no block scope so there’s still only one variable here called place, and it keeps getting updated as the loop runs.

So, you have to use a function instead:

var iids = ['119','120','121','122','123'];

function f(place) {
   // NOW `place` is a local variable.
   $(".deleteimage-" + place).click(function () {
       alert(place);
   });
}

for (var i=0; i<iids.length; i++) {
   f(iids[i]);
}

There are neater ways to employ this function approach using closures and bound variables, and the other answers cover those neater ways quite well. My answer has focused on explaining the issue.