[SOLVED] Find all mouse areas and assign click event

[Per-Erik Kristensson]

I have a row with several mouse areas, see the QML-code below. When the page has been loaded I want to assign what will happen on each click via javascript. I have two questions:

Now I put all mouse areas in an array with the id of the mouse area. Could I do something more clever and find all mouse areas in the row (via childrenAt or similar)?

Now when I click on an area it seems that always the last mouse area has been click (the last value of outputString is always used). How do I solve this?

@
import QtQuick 1.1

Rectangle {
width: 360
height: 360

Row {
    id: masterRow
    x: 0
    y: 0

    Rectangle {
        width: 100
        height: 100
        color: "red"

        MouseArea {
            id: mouseAreaRed
            anchors.fill: parent
        }
    }

    Rectangle {
        width: 100
        height: 100
        color: "yellow"

        MouseArea {
            id: mouseAreaYellow
            anchors.fill: parent
        }
    }

    Rectangle {
        width: 100
        height: 100
        color: "green"

        MouseArea {
            id: mouseAreaGreen
            anchors.fill: parent
        }
    }
}

Component.onCompleted:
{
    var areas = [];
    //I don't like this.
    areas.push(mouseAreaRed);
    areas.push(mouseAreaYellow);
    areas.push(mouseAreaGreen);

    for(var i=0; i<areas.length; i++)
    {
        var area = areas[i];
        var outputString = "Mouse area " + i + " was clicked.";
        area.clicked.connect( function()
        {
            //Bug: outputString is only correct for the last item.
            console.log(outputString);
        });
    }
}

}

@