jQuery область действия (?) проблема с минимальной демо регистр

Я боролся с этим один в течение нескольких часов, подсказка от кого-то, у кого была подобная ситуация кодирования, будет приветствоваться.

Используя jQuery, я пытаюсь связать событие click с динамически генерируемыми интервалами. У меня есть справедливое понимание переменной области видимости в JavaScript, но я, очевидно, отсутствует что-то о том, как области действия работают в сочетании с привязкой событий. Рассмотрение других тем о проблемах с областью не помогло (не мой сценарий использования).

Я сварил его до минимального теста. Jsfiddle находится здесь: http://jsfiddle.net/xkT25/ Убедитесь, что вы запускаете его при открытой консоли.

Интересная часть:

/** Add the click event handler to each span**/
for ( var i = 0; i < phones.length ; i++ ) {
    var span = $( '<span class="phone">' + phones[i].phone + '</span>' );
    console.log( 'phoneposition before .on(): ', phoneposition, span );
    span.on( 'click', function() { 
        // WHY IS phoneposition ALWAYS 4? (expecting an index between [0-3]
        console.log( ' phoneposition:' , phoneposition );
    });
    phoneposition++
    html = html.add( span );                
}

что приводит к значению 4 все время. Вместо этого мне нужно щелкнуть буквы, чтобы создать 0 для A, 1 для B и т.д. В консоли.

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: может показаться, что я просто пытаюсь получить индекс каждого диапазона, содержащего письмо, но это не так. На практике (т. .on( 'click'... Вне минимального случая) значение, которое мне нужно в .on( 'click'... и индекс каждого диапазона часто будет другим.