スコープの質問、ネストされた関数で変数が定義されていません

このget呼び出しを使用して、サーブレットからjsonマップを返します。var i = 0を作成します。データで返されたユーザーをカウントします。jsondata[i]返されたユーザーにアクセスするために、iを簡単に使用できます。しかし、以下では、クリックハンドラーのネストされた関数内で同じjsonとvarを使用しようとすると、undefinedが表示されます。私はここを見ました、そしてそれは言います：

各関数には独自のスコープがあり、その関数内で宣言された変数には、その関数とネストされた関数からのみアクセスできます。JavaScriptのローカルスコープは関数によって作成されるため、関数スコープとも呼ばれます。関数を別の関数内に配置すると、ネストされたスコープが作成されます。

では、なぜクリックハンドラーで未定義なのですか？に変更console.log(jsondata[i]);するconsole.log(jsondata[0]);と、未定義ではなく正しい情報が表示されます。

$.get("/lod1/Scuttlebutt",{name:"onload",data: -1},function(jsondata) {
    var numberofusers = jsondata.length;
    var i = 0;
    $(".mate").each(function(index) {
        //show
        $(this).css("display","block");
        //construct new id
        var mateid = 'mate'+jsondata[i][0].userid;
        //create ids for this mate
        $(this).attr('id',mateid+"MateContainer");
        $(this).find(".mateavatar").attr("id",mateid+"avatar");
        $(this).find("#matename").attr("id",mateid+"Name");
        $(this).find("#matepoints").attr("id",mateid+"Points");
        $(this).find("#matesensignia").attr("id",mateid+"Ensignia");
        $(this).find("#matebio").attr("id",mateid+"Bio");
        $(this).find("#matesets").attr("id",mateid+"Sets");
        $(this).find("#matebadges").attr("id",mateid+"Badges");
        //fill in correct info
        $(this).find("#"+mateid+"Name").text(jsondata[i][0].userName);
        $(this).find("#"+mateid+"Points").text(jsondata[i][0].points);
        $(this).find("#"+mateid+"Ensignia").attr('src',calculateEnsignia(jsondata[i][0].rank));

            //add onclick handler to username
            $(this).find("#"+mateid+"Name").on('click',function(){
                console.log(jsondata[i]);
                var num_tabs = $("div#tabmenu ul li").length + 1;

                $("div#tabmenu ul").append(
                    "<li><a href='#tab" + mateid + "'>" + jsondata[i][0].userName + "</a></li>"
                );
                $("div#tabmenu").append(
                    "<div id='tab" + mateid + "'> NEW TAB!</div>"
                );
                $("div#tabmenu").tabs("refresh");
            });