KineticJS - dynamically create array of shapes and using events

Question

I have managed to dynamically create an array of shapes, and they are nicely placed at different coordinates.

However, when I try to assign an event within that loop, the result of click is always the same. As if the click event is still referencing the last iteration of my loop.

What am I doing wrong? Thanks!

EDIT: Actually, re-produced this behaviour in an isolated environment:

var stage = new Kinetic.Stage({
        container: 'container',
        width: 1024,
        height: 768
    });
    var layer = new Kinetic.Layer();
    singleSegment=40;
    for (var i = 0; i < 4; i++) {
                depth=singleSegment+(singleSegment*i);
                dotLabel = new Kinetic.Text({
                    x: depth,
                    y: depth,
                    text: "test"
                });
                dotLabel.on('click', function(evt){
                    console.log(this.x);
                });
                layer.add(dotLabel);
    }
    stage.add(layer);

How do I add different events to these four labels?

Answer 1

You are doing everything correct, I think. but because of this;

            console.log(i);

The last value of i is array.length-1, and when it is clicked, it shows that value, which does not change because it's outside of loop when it is clicked.

This will show different value.

            console.log(this.attrs.x);