jQuery的.append（）：奇怪的行为

debugcn 发表于 Dev

磐正

我用.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);
}

查看JS Bin上的代码

所有功能都工作正常，除了您可以看到的，当您单击所有按钮时：调用了相同的回调（buttons对象中的最后一个定义）。我检查了jQuery的文档，也许这与以下内容有关：

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

或者，我需要重构代码。我测试了不同的解决方案，但没有一个起作用。有人可以帮助我吗？

盗贼大师

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

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

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

更新的JSBin

为什么这是必要的？在JavaScript中，没有块作用域。只有函数才能创建新的作用域。因此，在您的原始代码中，将代码var button_callback提升到了范围的顶部（该函数包含您的循环或全局范围，如果没有的话）。因此，在每个迭代中，您都有相同的变量。并且此变量绑定到您的匿名函数的关闭。因此，在循环之后，变量在所有三个函数中都具有最后一个值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。