事件处理程序未附加到在forloop中创建的div元素

Question

我正在尝试创建一个简单的用户界面，该界面由一个输入文本框组成，该框只接受3X10数字键盘网格0-9中的值，最上面一行显示在数字键盘上选择的数字。像这样的东西是exactUI界面

到目前为止，我已经能够创建"；divs"；我将用于按钮，但它们堆叠在一起，我可以使用引导程序进行造型，并使对齐工作正常。我一直无法连接所需的事件侦听器，也无法弄清楚我做错了什么。下面是我的代码。我正在使用jquery和bootstrap。

function buildHtmlAndInteractions(init, lrnUtils) {
//number pad structure
// var $htmlObj = $('<table id="responsetable"><thead><input id="question_input" type="text" placeholder="e.g. 15:45" /><tr>...</tr></thead><tbody>');
// var $htmlObj = $('<div class="container"><input id="question_input" type="text" placeholder="e.g. 15:45" /><div>...</div></div>')
var $htmlObj = $('<div class="container-fluid">');
var html = '<input id="question_input" type="text" value="">';
var padLayout = [
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
];
for (let i = 0, len = padLayout.length; i < len; ++i) {
html += `<div class="row">`;
for (let j = 0, rowLen = padLayout[i].length; j < rowLen; ++j) {
html += `<div class="col" textContent="${padLayout[i][j]}">` + padLayout[i][j] + `</div>`;
var keys = document.getElementsByClassName("col");
for (var k = 0; k < keys.length; k++) {
keys[k].addEventListener('click', logtoCon, false);
}
function logtoCon() {
console.log(this.className);
}
console.log(keys);
}
html += '</div>';
}
html += '</div>';
$(html).appendTo($htmlObj);
return $htmlObj;
};

Answer 1

您需要将eventListener绑定到页面上的实际元素。现在，您正试图在尚不存在的东西上创建eventListener。var keys = document.getElementsByClassName("col");将为空，因为在您的函数中，此时元素尚未写入页面。。

只需将以下几行OUT移到函数的末尾(在appendTo((方法之后(，该方法将字符串转换为实际的HTML元素。

function buildHtmlAndInteractions(init, lrnUtils) {
//.. all your code
$(html).appendTo($htmlObj);
var keys = document.getElementsByClassName("col");
for(var k = 0; k<keys.length; k++){
keys[k].addEventListener('click', logtoCon, false);
}
return $htmlObj; // not sure why you need this...

}；