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

时间:2013-09-25 10:41:08

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

我正在尝试将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
            }
        });
    };
}

按钮不起作用......

1 个答案:

答案 0 :(得分:2)

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

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

更简单的解决方案更改

var user = data[c];

let user = data[c];