我正在尝试将 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
}
});
};
}
按钮不起作用...
最佳答案
发生这种情况是因为闭包在 Javascript 中的工作方式,而不是特定于 sdk 或扩展的东西。
请参阅“Creating closures in loops: A common mistake”以了解您问题的一般解决方案。
为了更简单的解决方案更改
var user = data[c];
到
let user = data[c];
关于javascript - Firefox 扩展 - 面板元素 onclick 被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19002687/