Firefox 扩展 - 面板元素 onclick 被覆盖答案

【问题标题】：Firefox extension - panel elements onclick getting overwrittenFirefox 扩展 - 面板元素 onclick 被覆盖
【发布时间】：2013-09-30 21:55:12
【问题描述】：

我正在尝试将 onclick 事件分配给动态创建的面板元素：

for(var c = 0; c < data.length; c++) {
    var user = data[c];
    document.querySelector('#userList').innerHTML += '<li class="user" id="button-login-' + c + '"><img src="user.png" /><span>' + user.username + '</span></li>';
    document.querySelector('#button-login-' + c).onclick = function() {
        self.port.emit('button', {
            'action': 'login',
            'data': {
                'username': user.username
            }
        });
    };
}

但似乎第一个 onclick 事件被最后一个覆盖... 有什么帮助吗？

在新代码中我尝试了这个：

for(var c = 0; c < data.length; c++) {
    user = data[c];
    document.querySelector('#userList').innerHTML += '<li class="user" id="button-login-' + c + '"><img src="user.png" /><span>' + user.username + '</span></li>';
    document.querySelector('#button-login-' + c).onclick = function() {
        self.port.emit('button', {
            'action': 'login',
            'data': {
                'username': user.username
            }
        });
    };
}

还有这个：

for(var c = 0; c < data.length; c++) {
    let user = data[c];
    document.querySelector('#userList').innerHTML += '<li class="user" id="button-login-' + c + '"><img src="user.png" /><span>' + user.username + '</span></li>';
    document.querySelector('#button-login-' + c).onclick = function() {
        self.port.emit('button', {
            'action': 'login',
            'data': {
                'username': user.username
            }
        });
    };
}

按钮不起作用...

【问题讨论】：

有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含重现问题的有效代码。请参阅SSCCE.org 获取指导。
这是因为您的 onclick 处理程序是一个闭包。所有 onclick 事件处理程序都将指向最后一个用户对象。见britseyeview.com/software/articles/closures.html。欢迎使用 JavaScript :)
@Kashif 做出正确的回答并获得支持；）
@nmaier 让我的评论成为答案。

标签： javascript firefox firefox-addon firefox-addon-sdk add-on

【解决方案1】：

这是因为闭包在 Javascript 中的工作方式，而不是特定于 sdk 或扩展的东西。

请参阅“Creating closures in loops: A common mistake”了解您的问题的一般解决方案。

为了更简单的解决方案更改

var user = data[c];

到

let user = data[c];

【讨论】：

问题依旧，按钮无法点击……onclick事件没有发生