javascript/jQuery中的局部变量

我不熟悉使用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);
 });
};

var sourceNodes={
输入文件：{
cssClass:“.数据源”，
名称：“输入文件1”，
选项：[{
名称：“输入文件1”，
连接源：[]，
连接到：[“IF1.1”、“IF1.2”]，
},
{
名称：“输入文件2”，
连接源：[]，
连接到：[“IF1.1”]，
}]
},
输入文件2：{
cssClass:“.数据源”，
名称：“Input2.1”，
选项：[{
名称：“Input2.1”，
连接来自：[“Input1”]，
连接到：[“Input2.1”]，
},
{
名称：“Input2.2”，
连接来自：[“Input1”]，
连接到：[“Input2.2”]，
}]
},
输入文件3：{
cssClass:“.数据源”，
名称：“Input3.1”，
选项：[{
名称：“Input3.1”，
连接来自：[“Input2”]，
连接到：[“Input3.1”]，
}]
}
};
for（sourceNodes中的var m）{
var sourceNode=sourceNodes[m]；
var sourceClass=jsplump.getSelector（sourceNode.cssClass）；
console.log（sourceClass）；
绑定（“单击”），函数（连接）{
var selectorClass=sourceNode.cssClass.concat（“\u window”）。子字符串（1）；
var toFind=“div[id^=”.concat（selectorClass，“]”）；
var DivIndex=$（'#render'）.find（toFind）.length+1；
var DivName=selectorClass.concat（DivIndex）；
var Div=$（''，{id:DivName}，
{class:selectorClass}）；
Div.css（{
顶部：connection.clientY，
左：connection.clientX，
});
Div.appendTo（'render'）；
Div.text（sourceNode.name）；
可拖动管道（美元（Div））；
$（Div）.addClass（selectorClass）；
_添加点（DivName、[“底部中心”]、[“顶部中心”]）；
var-selectOption=$（''，{id:DivName}）；
对于（var n=0；n

---

所发生的情况是，sourceNodes中单击的每个项都会接受InputFiles3中的值，InputFiles3是通过sourceClass.bind绑定的最后一个条目。了解我在这里缺少的概念以及如何使循环中的每个对象独立吗？

单击时，

sourceNode

被设置为列表中的最后一项。一种解决方案是使用立即调用的函数表达式创建闭包：

for (var m in sourceNodes) {
    (function (sourceNode) {
        ...        
    })(sourceNodes[m]);
};

用于将当前源节点作为第一个参数传递给

单击
处理程序：

for( var m in sourceNodes ){
    var sourceNode = sourceNodes[m];
    var sourceClass = jsPlumb.getSelector(sourceNode.cssClass);
    console.log(sourceClass);

    sourceClass.bind("click", $.proxy(function(currentNode, connection){
        //currentNode is a reference to sourceNode[m] when
        //this click handler was registered
     }, null, sourceNode));
};

另外，从jQuery 1.7开始，不推荐使用.bind（），并应根据您的需要替换为.on（）或.delegate（）。有关详细信息，请参阅。@chausser已添加超级种子，未弃用。不必急于从现有代码中删除它。不，您也不应该使用
delegate
。它也被
上的
取代。很高兴知道，.on（）似乎没有绑定到页面加载后添加到DOM中的事件，但这是另一个问题的问题。谢谢，很高兴我在闲逛一个小时之前问了这个问题。我永远也想不到这一点。