'onclick' JavaScript 中创建的事件处理程序不起作用

Question

"click"事件侦听器没有添加到按钮中。按钮与其他属性一起正确显示。我找了一段时间都没找到解决办法。

const connectedFriendsList = document.querySelector('#connected-friends-list');
function openMessengerWith(){
var friend_id = this.value;
console.log('Opening messenger with : ', friend_id);    
}
// =======================================================
//  Create elements and render friends list
//
var but;
function renderFriendsList(doc){
console.log('Rendering friend...');
but = document.createElement("input");
but.setAttribute("value", doc.id);
but.setAttribute("type", 'button');
but.id = doc.id;
but.addEventListener('click', function(){
openMessengerWith();
}, false);
console.log(but);
connectedFriendsList.appendChild(but);
console.log('Friend listed.');
}

renderFriendsList函数在底部被调用。

firestore.collection('Users').doc(uid).collection('Friends').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderFriendsList(doc);
})
});

编辑：

function openMessengerWith(value){
var friend_id = value;
console.log('Opening messenger with : ', friend_id);    
}
function renderFriendsList(doc){
console.log('Rendering friend...');
var but = document.createElement("button");
but.setAttribute("value", doc.id);
but.setAttribute("type", 'button');
but.id = doc.id;
but.innerHTML = doc.id;
connectedFriendsList.appendChild(but);
attachClickEvent(doc.id);
console.log('Friend listed.');
}
function attachClickEvent(value){
var test1 = document.getElementById(value);
console.log('current obj',test1);
document.getElementById(value).addEventListener("click", 
function(){
openMessengerWith(value);
});
console.log('click events attached');
}

日志：这是更新的日志。正如您所看到的，按钮已经创建。但是，没有附加事件侦听器。

Rendering friend...           messagesmain.js:71
current obj <button value=​"6r7CllAhMhPgmrhhjx1aneBCBbc2" type=​"button" id=​"6r7CllAhMhPgmrhhjx1aneBCBbc2">​6r7CllAhMhPgmrhhjx1aneBCBbc2​</button>​
messagesmain.js:76
click events attached          messagesmain.js:56
Friend listed.                 messagesmain.js:48
Rendering friend...            messagesmain.js:71
current obj <button value=​"J1EbJJ9iZKTspqiSKawZN7i5pPh2" type=​"button" id=​"J1EbJJ9iZKTspqiSKawZN7i5pPh2">​J1EbJJ9iZKTspqiSKawZN7i5pPh2​</button>​
messagesmain.js:76
click events attached          messagesmain.js:56
Friend listed.                 messagesmain.js:48
Rendering friend...            messagesmain.js:71
current obj 
<button value=​"xSLBN2BqVocemn0OWOKh2UGY8Pt1" type=​"button" id=​"xSLBN2BqVocemn0OWOKh2UGY8Pt1">​xSLBN2BqVocemn0OWOKh2UGY8Pt1​</button>​
messagesmain.js:76
click events attached          messagesmain.js:56
Friend listed.

Answer 1

如果您想获得输入的值，使用this是个好主意。但是你需要知道this的参考
在您的代码中，this的引用是window，而不是<input>标记。这就是为什么你不能得到价值。因此，您需要将this.value传递到函数openMessengerWith中

but = document.createElement("input");
but.addEventListener('click', function() {
let value = this.value;
openMessengerWith(value);
}, false);
function openMessengerWith(value){
var friend_id = value;
console.log('Opening messenger with : ', friend_id); 
}
connectedFriendsList.appendChild(but);