Javascript setAttribute onclick事件未设置并在单击按钮之前运行

我正在通过数组对象、两个字段名称和类创建一个crud表，提交按钮使用两个按钮“编辑”和“删除”添加两个字段，当我在“单击以删除”按钮上添加“设置属性”时，它在“事件添加”按钮上运行，而不是在“删除”按钮上运行

我尝试了

document.getElementById（xyz）.setAttribute（'onclick'，function）

它没有解决我的问题

我想在按下del按钮并引发所需事件时运行该功能

var arobj=[]；
功能负载（arr）{
对于（变量i=0；i

姓名：

类别：


名称
班
行动

1）使用：

而不是：

 var delbtn = del.getElementById("btn" + (arobj.length - 1));

2） 同时添加代码：

del.addEventListener('click', delet);

1） 使用：

而不是：

 var delbtn = del.getElementById("btn" + (arobj.length - 1));

2） 同时添加代码：

del.addEventListener('click', delet);

---

修改了一些代码，请看下面的评论，顺便说一句：使用jQuery、react、Vue等非常有效。。解决此Dom数据时使用的库

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1).toString());       
    var delbtn = document.getElementById("btn" + (arobj.length - 1));

    // here delbtn is null, it have not add to document yet!;
    console.log('delbtn',delbtn);

    act.appendChild(del);

    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);
    console.log(arobj);
    console.log(row.getAttribute("id"));

    // delbtn is ready now;
    delbtn = document.getElementById("btn" + (arobj.length - 1));
    console.log('delbtn',delbtn);   // here is ok

    //add click event
    del.addEventListener("click",delet);
  }

---

修改了一些代码，请看下面的评论，顺便说一句：使用jQuery、react、Vue等非常有效。。解决此Dom数据时使用的库

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1).toString());       
    var delbtn = document.getElementById("btn" + (arobj.length - 1));

    // here delbtn is null, it have not add to document yet!;
    console.log('delbtn',delbtn);

    act.appendChild(del);

    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);
    console.log(arobj);
    console.log(row.getAttribute("id"));

    // delbtn is ready now;
    delbtn = document.getElementById("btn" + (arobj.length - 1));
    console.log('delbtn',delbtn);   // here is ok

    //add click event
    del.addEventListener("click",delet);
  }

---

将行添加到DOM后，需要将事件单击绑定到del按钮：

var arobj=[]；
功能负载（arr）{
对于（变量i=0；i

姓名：


类别：


名称
班
行动

将行添加到DOM后，需要将事件单击绑定到del按钮：

var arobj=[]；
功能负载（arr）{
对于（变量i=0；i