表内的 JS 事件不会触发答案

【问题标题】：JS event inside table won't fire表内的 JS 事件不会触发
【发布时间】：2017-12-18 07:15:45
【问题描述】：

当使用 JS 创建一个表并在该表内有一个按钮时，该按钮上有一个 eventListener，单击该按钮时不会触发该事件。我在 forEach-Loop 中调用这个函数来动态构建我的表，并为每个按钮应用事件监听器。

这是我的原始代码：

static createList(item) {
    let table = document.getElementById("rows")
    let row = table.insertRow();
    let cell_1 = row.insertCell();
    cell_1.innerHTML = item.id_recipient_sms;
    let cell_2 = row.insertCell();
    cell_2.innerHTML = '<input type="text" placeholder="' + item.phone_number + '" id="smsRecipient' + item.id_recipient_sms + '">';

    var inputElement = document.createElement('input');
    inputElement.type = 'button';
    inputElement.id = item.id_recipient_sms;
    inputElement.addEventListener('click', function() {
        console.log(item.id_recipient_sms)
    });

    let cell_3 = row.insertCell();
    cell_3.appendChild(inputElement);
}

这在我的程序中不起作用。我创建了一个代码 sn-p，但它正在工作。它与循环中的 addEventListener 有什么关系吗？我仍然无法在我的原始代码中找到错误。

let table = document.getElementById("rows")
                            let row = table.insertRow();
                            let cell_1 = row.insertCell();
                            cell_1.innerHTML = "cell1";

                            let cell_2 = row.insertCell();
                            cell_2.innerHTML = "cell2";

                            var inputElement = document.createElement('input');
                            inputElement.type = 'button';
                            inputElement.addEventListener('click', function() {
                                alert("It Works here");
                            });

                            let cell_3 = row.insertCell();
                            cell_3.appendChild(inputElement);

<table id="rows">

</table>

【问题讨论】：

标签： javascript button click addeventlistener

【解决方案1】：

伙计，你的代码在这里工作。

【讨论】：

我知道。不过，它在我的原始代码中不起作用。
你在课堂上用过这个static foo(){}吗？
是的，我认为它可能有什么。与此有关，也许..？
是的，你可以用这个 for 做某事，但语法看起来是正确的。我不知道该说什么，但是如果您愿意，可以查看此文档。也许你可以找到任何更正的东西:) javascript.info/class

【解决方案2】：

您尚未在代码中调用该函数。这就是为什么它不起作用。而是在脚本标签内或外部js文件中，添加不带函数的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="master.css">
  </head>
  <body>
    <table id="rows">
    </table>
  </body>
 <script type="text/javascript">
 let table = document.getElementById("rows")
                             let row = table.insertRow();
                             let cell_1 = row.insertCell();
                             cell_1.innerHTML = "cell1";

                             let cell_2 = row.insertCell();
                             cell_2.innerHTML = "cell2";

                             var inputElement = document.createElement('input');
                             inputElement.type = 'button';
                             inputElement.addEventListener('click', function() {
                                 alert("It Works here");
                             });

                             let cell_3 = row.insertCell();
                             cell_3.appendChild(inputElement);

 </script>
</html>

这行得通吗？

【讨论】：

我正在调用该函数...该函数构建了 html 表，但未应用事件侦听器。（firefox 检查器中没有“ev”标记）