javascript - javascript/jQuery のローカル変数

Question

私はjQuery/javascriptを初めて使用し、jsPlumbライブラリを使用していくつかの動的ノードを構築することに取り組んでいます。ユーザーが形状をクリックすると、新しいドラッグ可能なノードが表示されます。

私の問題は、for ループを使用してリストを作成していて、反復処理された最後の要素が他のすべての「クリック」に割り当てられていることです。

問題のあるコードは次のとおりです。

var sourceNodes = {
InputFiles:{
    cssClass:".data_source",
    name:"Input Files1",
    options:[{
        name:"Input Files1",
        connectsFrom:[],
        connectsTo:["IF1.1", "IF1.2"],
    },
    {
        name:"Input Files2",
        connectsFrom:[],
        connectsTo:["IF1.1"],
    }]
},
InputFiles2:{
    cssClass:".data_source",
    name:"Input2.1",
    options:[{
        name:"Input2.1",
        connectsFrom:["Input1"],
        connectsTo:["Input2.1"],
    },
    {
        name:"Input2.2",
        connectsFrom:["Input1"],
        connectsTo:["Input2.2"],
    }]
},
InputFiles3:{
    cssClass:".data_source",
    name:"Input3.1",
    options:[{
        name:"Input3.1",
        connectsFrom:["Input2"],
        connectsTo:["Input3.1"],
    }]
}
};

for( var m in sourceNodes ){
var sourceNode = sourceNodes[m];
var sourceClass = jsPlumb.getSelector(sourceNode.cssClass);
console.log(sourceClass);
sourceClass.bind("click", function(connection){
    var selectorClass = sourceNode.cssClass.concat("_window").substring(1);
    var toFind = "div[id^='".concat(selectorClass,"']");
    var DivIndex = $('#render').find(toFind).length+1;
    var DivName = selectorClass.concat(DivIndex);
    var Div = $('<div>', { id: DivName },
                 { class: selectorClass });
    Div.css({ 
        top: connection.clientY,
        left:  connection.clientX,
    });
    Div.appendTo('#render');
    Div.text(sourceNode.name);
    jsPlumb.draggable($(Div));
    $(Div).addClass(selectorClass);         
    _addEndpoints(DivName, ["BottomCenter"], ["TopCenter"]);
    var selectOption = $('<select>', { id: DivName });
    for( var n=0; n< sourceNode.options.length; n++){
        var option = $('<option>', { value: n,
        connectsTo: sourceNode.options[n].connectsTo,
        connectsFrom: sourceNode.options[n].connectsFrom });
        option.text(sourceNode.options[n].name);
        $(selectOption).append(option);
    }
    $(Div).append(selectOption);
 });
};

クリックされた sourceNodes 内の各項目は、sourceClass.bind によってバインドされた最後のエントリである InputFiles3 の値を取得します。ここで欠けている概念と、ループ内の各オブジェクトを独立させる方法についての洞察はありますか?