1

動的に作成されたパネル要素に 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
            }
        });
    };
}

ボタンが効かない…

4

1 に答える 1

2

これは、sdk や拡張機能に固有のものではなく、Javascript でクロージャが機能する方法が原因で発生しています。

問題の一般的な解決策については、「ループでクロージャを作成する: よくある間違い」を参照してください。

より簡単なソリューションの変更

var user = data[c];

に

let user = data[c];
于 2013-09-26T03:50:29.510 に答える