Jquery can't get my head around this

Question

The alert(i) onclick bind line is run on 3 divs, but all of them when clicked alert the last set value of i . I hope what I'm trying to do makes sense, it's hard to explain. Instead of alerting 1,2 or 3, it alerts 3,3,3.

// Updates bar preview box
this.updatePropertyMarkerBox = function(self, BarsID) {

    ... snip ...

    // Loop  and add event handler
    for (var i = 0; i < self.bars[BarsIndex].markers.length; i++) {

        // Add click event
        $("#bmi-" + self.containerId + "-" + i).bind('click', function() {
            alert(i);
        });
    }

Answer 1

When you're iterating in the for loop, you're essentially given the address to i, if you use it within the for loop at that very moment, it will be the value expected, however if you use it later (such as in a click event) it will point to the final incremented value of 3. To get the desired affect you can create an anonymous function, like so

for (var i = 0; i < self.bars[BarsIndex].markers.length; i++) (function(i) {

    // Add click event
    $("#bmi-" + self.containerId + "-" + i).bind('click', function() {
        alert(i);
    });
})(i)

Answer 2

    $("#bmi-" + self.containerId + "-" + i).bind('click', (function(i) {
        return function() {
            alert(i);
        };
    })(i));

Answer 3

While you could use invoke a function inside the loop, creating a new variable scope which captures the current value of i , an alternate approach would be to simply take the i value from the element's ID attribute:

for (var i = 0; i < self.bars[BarsIndex].markers.length; i++) {

    $("#bmi-" + self.containerId + "-" + i).bind('click', function() {
          //grab the number from the ID of the element
        alert( /\d+$/.exec( this.id )[0] );
    });
}

Example: http://jsfiddle.net/UGQA7/

Answer 4

On a tangent, a better way to add click handlers to multiple markers would be add a single click handler to just their container. The HTML could look something like:

<div id=#bmi-xxx">
    <div class="marker" data-marker="0">...</div>
    <div class="marker" data-marker="1">...</div>
    ...

You can use generic HTML5 data-* attributes to store arbitrary data.

And the JavaScript would be:

// Updates bar preview box
this.updatePropertyMarkerBox = function (self, BarsID) {

    ... snip ...

    // Add event handler
    $("#bmi-" + self.containerId).click(function (event) {
        var marker = $(event.target).attr("data-marker");

        if (marker) { // Hey, it's a marker!
            alert(marker);
        }
    });