jQuery .append() ：奇怪的行为

Posted 2023-05-09

【中文标题】jQuery .append() ：奇怪的行为

【英文标题】：jQuery's .append() : strange behavior

【发布时间】：2013-09-04 16:26:07

【问题描述】：

我在使用 jQuery 的 .append() 方法时遇到了一个奇怪的行为。

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);

View the code on JS Bin

一切正常，除了，如您所见，单击所有按钮时：调用相同的回调（最后一个在buttons 对象中定义）。我检查了 jQuery 的文档，也许这是相关的：

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

或者，我需要重构我的代码。我测试了不同的解决方案，但都没有奏效。任何人都可以帮助我吗？

【参考方案1】：

这是一个古老的“循环中的变量传递给回调”问题，在 Stack Overflow 上存在十亿次。所以它根本与jQuery无关。

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

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

Updated JSBin

为什么这是必要的？在 javascript 中没有块作用域。只有函数会创建新范围。因此，在您的原始代码中，var button_callback 被提升到范围的顶部（如果没有，则包含您的循环或全局范围的函数）。因此，在每次迭代中，您都有 same 变量。这个变量绑定到你的匿名函数的闭包。因此，在循环之后，变量具有最后一个值 - 在所有三个函数中。

【讨论】：

你可以像这样添加关于 IIFE 的好文章：benalman.com/news/2010/11/…

感谢小偷的详细回答（即使这是一个菜鸟问题，我也不是每天都在使用 JS），也感谢那个回答我的家伙，认为我是一个完全没有生命的人彻底了解每个社区的规则。