Question

“单击”事件侦听器未添加到按钮。按钮确实与其他属性一起正确显示。我搜索了一段时间，却找不到解决方法。

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);

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

1 个答案: