表内的JS事件不会触发

问题描述 投票：0回答：2

使用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);
}

哪个在我的程序中不起作用。我创建了一个代码片段，但它正在运行。它可以与循环中的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
2个回答
0
投票

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

enter image description here

0
投票

您尚未在代码中调用该函数。这就是为什么它不起作用。而是在脚本标记内或外部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>

这有效吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.