Q:

When assigning different eventListeners to each element in a loop they all run the same function, DESPITE use of .bind() and closures

The Issue
The project uses CreateJS, and is built so that you can create various games and exercises in Canvas by adding JSON-data.  To demonstrate the problem I will use the example of the 'Alphabet Board', where you can click on a picture of each letter to hear it read out loud.  The problem is they all play the sound of the last letter. 
When creating an exercise, the JSON-data is loaded from a database.  It adds all the things the user specified, but there is a problem when it gets to adding areas.  These are user-defined with coordinates, size and what actions to perform when clicked on.  It does this by going through a loop, checking what kind of area to add (circle, rectangle, hidden rectangle etc.),  adding it through CreateJS and then assigning an eventListener to perform the predefined action.  However, in the end, all the eventListeners perform the same action, namely the last one.  However, I am using .bind() and have also tried creating a closure in an anonymous function with the same result. 
Example
This is what the data of an area looks like (letter A as an example):
{"coords":"25,30,67,55","type":"rectangleHidden","actions":[{"do":"playSound","data":{"asset":{"id":"a","src":"a.mp3"}}}]}

You can take a better look here with JSON Editor Online:
Data for A to C
All assets are preloaded and accessible.  When all assets are loaded, the scene is built and this function runs:
p.addAreas = function (areas, event) {
    var i = 0,
    length = (typeof areas ! = 'undefined') ?  areas.length : 0;

    for (; i < length; i++) {
        var x = i;
switch (areas[i].type) {                
            case 'rectangleHidden':
                var rectangleHidden = new ui. Rectangle(areas[i].coords, this. STRIKE, this. FILL, this. STROKE_STYLE, false);
                rectangleHidden.alpha = 0.01; 
                this.addChild(rectangleHidden);
                rectangleHidden.addEventListener('click', this.doActions.bind(event, areas[i].actions, this));
                break;
            default :
                break;
        }
    }
}

I omitted the different cases for the switch as this example only uses the rectangleHidden.  Same goes for the next one, where I only included playSound.  So the function assigned by the addEventListener is this one:
p.doActions = function (actions, scene) {
    "use strict";
    var i = 0,
    length = actions.length;

    // cleans up scene
    p.cleanUp(scene);

    // adds actions in sequence order
    for (; i < length; i++) {
        var action = actions[i],
        data = action.data;

        // switch over action
        switch (action.do) {
            case 'playSound':
                var delayTime = Number(data.delay || 0);
                var looper = Number(data.loop || 0);
                new createjs. Sound.play(data.asset.id, { delay: delayTime, loop: looper });
                break;
            default:
                break;
        }
    }
}

Even though .bind() is being used, in this case, all the letters would play the sound "c.mp3" instead of their respective sounds.  Where am I going wrong with this?  Does the eventListener get overwritten somewhere? 
What I have tried
I have tried modifying the code where the eventListener is added to something like this:
rectangleHidden.on('click', function (scene, action) {
                    return scene.doActions.bind(event, action, scene);
                }(this, areas[i].actions));

But it still produces the same result. 
I also tried creating a classic closure in a different project where the eventlistener calls for this function with the i-value from the loop:
function saveNumber(value) {
    return function () { console.log(value); };
}

In the other project, as expected, each list item wrote their own number from the array in the console when clicked.  When I tried adding this function to the eventlistener in the current project instead, it still writes out the last value of the loop everytime, in this case 2. 
 rectangleHidden.addEventListener('click', saveNumber(i));
What is the difference between these? ( The function is defined outside of the loop and outside of the addAreas-expression as well.) 
Additional Info
I can add that this refers to the Canvas-stage itself, and I did not write this code originally, I am merely trying to fix the issue.  The same code seems to have been working before I updated to createjs-2015.05.21 from createjs-2013.12.12, but switching back to it did not make any difference.  Please ask me for more details if you need them! 
I have read JavaScript closure inside loops – simple practical example, and while it seemed like it could help me at first glance, it's not quite addressing my problem.  In the answers it is explained how to use closures and .bind() to solve the issue, however, my problem is that this is occuring despite using those. 

A:

The problem was indeed with CreateJS and updating to the latest version.  Previously classes were extended by using the initialize-method and later on changed to use the SuperClass_constructor instead, as explained here. 
Because of the old code the buttons were not properly created and caused an issue with the .on() and .addEventListener()-methods.  The loop worked all along!