jQuery'；s.append（）：奇怪的行为

我用jQuery方法面对一个奇怪的行为

var container = $('#container');


var buttons = {
    'Okay': function() {
        return 'Yeah, I\'m okay with this.';
    },
    'Nope': function() {
        return 'No, no, definitively no.';
    },
    'Maybe': function() {
        return 'Hum, maybe.';
    }
};


for(var button_label in buttons) {
    var button_callback = buttons[button_label];

    var button_html = $('<button type="button">' + button_label + '</button>');

    button_html.on('click', function() {
        alert('button : ' + $(this).text() + ', callback : ' + button_callback());
    });

    container.append(button_html);
}

var-container=$（'#container'）；
变量按钮={
“好”：函数（）{
返回“是的，我同意这一点。”；
},
“否”：函数（）{
返回“不，不，绝对不”；
},
'Maybe'：函数（）{
返回“哼，也许吧”；
}
};
用于（按钮中的var按钮\标签）{
var button_callback=按钮[按钮标签]；
变量按钮\ html=$（''+按钮\标签+''）；
按钮_html.on（'click'，function（））{
警报（'button:'+$（this.text（）+'，回调：'+button_callback（））；
});
container.append（按钮\ html）；
}

一切正常，但正如您所看到的，当单击所有按钮时：调用相同的回调（最后一个在

按钮

对象中定义）。我检查了jQuery的文档，可能这与：

但是，如果有多个目标元素，则将在第一个元素之后为每个目标创建插入元素的克隆副本

或者，我需要重构我的代码。我测试了不同的解决方案，但都不起作用。有人能帮我吗？

这是一个很好的“循环中的变量传递给回调”问题，它在堆栈溢出上存在十亿次。因此，它与jQuery完全无关

您需要做的是在每个循环期间创建一个新变量。最简单的方法是使用一个匿名函数，该函数立即执行并将值作为参数接收

(function(button_callback) {
    button_html.on('click', function() {
        alert('button : ' + $(this).text() + ', callback : ' + button_callback());
    });
})(button_callback);

---

为什么这是必要的？在JavaScript中没有块作用域。只有函数才能创建新的作用域。因此，在原始代码

var按钮中，回调被提升到作用域的顶部（包含循环的函数或全局作用域，如果没有）。因此，在每次迭代中，都有相同的变量。这个变量绑定到匿名函数的闭包。因此，在循环之后，变量在所有三个函数中都有最后一个值。
您可以添加这样一篇关于iLife的好文章：感谢您的详细回答（即使这是一个noob问题，我也不是每天都使用JS），谢谢那个回答我的家伙，他认为我是一个彻头彻尾的人，没有人知道每个社区的规则。