如何访问动态创建的按钮？答案

【问题标题】：How to access dynamically created button?如何访问动态创建的按钮？
【发布时间】：2018-02-14 10:46:08
【问题描述】：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);

我有一行简单的代码，我用我的 javascript 创建了一个按钮。如何通过同一个 javascript 文件访问此按钮？我想为其添加 onClick 功能。

document.getElementById("update0").onclick = edit_row(0);

我尝试通过添加上面的代码行来做到这一点，但现在它不会显示表格而是直接跳转到 edit_row() 函数。

编辑：

function showCustomer() {

  var obj, dbParam, xmlhttp, myObj, x, txt = "",tabCell;    
  var btnUpdate;
  obj = { "table":"Successful", "limit":20 };
  dbParam = JSON.stringify(obj); 
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myObj = JSON.parse(xmlhttp.responseText);
    console.log(myObj);
    var col = [];
    for (var i = 0; i < myObj.length; i++) {
        for (var key in myObj[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    key="Update";
    col.push(key);
    console.log(col);
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myObj.length; i++) {

        tr = table.insertRow(-1);
        tabCell = null;
        for (var j = 0; j < col.length-1; j++) {
            tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myObj[i][col[j]];
        }
        tabCell = tr.insertCell(-1);
        btnUpdate = document.createElement("BUTTON");
        var t = document.createTextNode("Update");
        btnUpdate.id = 'update'+i;
        btnUpdate.appendChild(t);
        tabCell.appendChild(btnUpdate);
    }
    tr = table.insertRow(-1);

        tabCell = null;
        for (var j = 0; j < col.length-1; j++) {
            tabCell = tr.insertCell(-1);
            tabCell.innerHTML = " ";
        }
        tabCell = tr.insertCell(-1);
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("Add Row");
        btn.appendChild(t);
        tabCell.appendChild(btn);

        document.getElementById("update0").addEventListener = function (){
            edit_row(0);
        };

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    }
  };
  xmlhttp.open("POST", "http://localhost:8090/Vaccine", true);
  xmlhttp.setRequestHeader("Content-type", "application/JSON");
  xmlhttp.send("x=" + dbParam);  
}

function edit_row(no)
{
    alert("HELLO");
}

【问题讨论】：

创建按钮后，您可以向其添加监听器，如下所示：btnUpdate.addEventListener('click', function () {edit_row(0);}); 添加的监听器将跟随按钮，无论您要在何处追加/插入稍后点击按钮。

标签： javascript html

【解决方案1】：

用这一行：

document.getElementById("update0").onclick = edit_row(0);

您没有将点击事件“附加”到 edit_row 函数。您正在使用 edit_row(0) 调用的结果设置 onclick 属性。

另外，不要使用onclick 属性。

请改用addEventListener 函数。

document.getElementById("update0").addEventListener("click", function () {
    edit_row(0);
});

如果您需要理由：通过覆盖 onclick 属性，您可能会禁用元素上的任何其他点击事件侦听器。通过使用addEventListener()，您可以在同一个元素/事件对上拥有多个事件侦听器。

您可以在创建按钮后立即执行此操作。你以后不需要通过它的 id 来获取它。

您的代码将如下所示：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
btnUpdate.addEventListener("click", function () {
    edit_row(0);
});

【讨论】：

Uncaught TypeError: Cannot set property 'onclick' of null at XMLHttpRequest.xmlhttp.onreadystatechange 我收到该行代码的此错误
您可以通过在创建按钮后立即调用 addEventListener 函数来解决此错误。查看我的最后一次编辑。

【解决方案2】：

您必须在点击事件的回调中执行此操作。如果你内联，它会在 javascript 读取你的代码时直接执行。

document.getElementById("update0").onclick = function (){
    edit_row(0);
};

【讨论】：

Uncaught TypeError: Cannot set property 'onclick' of null at XMLHttpRequest.xmlhttp.onreadystatechange 它给了我该行的此错误。
@KeshviSrivastava 你能发布完整的代码吗？看起来你的元素是空的。可能是通过错误的方式访问或您的元素不存在。

【解决方案3】：

如何通过同一个 javascript 文件访问此按钮？

与您一直以来访问它的方式相同。

它存储在btnUpdate 变量中。使用它。

但现在它不会显示表格而是直接跳转到edit_row()函数。

那是因为您正在调用 edit_row 并将其返回值设置为点击处理程序。

既然你想给它传递参数，最简单的事情就是创建一个新函数。

function edit_row_first_argument_0 () {
    edit_row(0);
}

button.addEventListener("click", edit_row_first_argument_0);

（您可以使用匿名函数表达式，为了清楚起见，我使用上面的详细方法）。

【讨论】：

正如您在上面看到的（我现在已经上传了整个代码）我有多个按钮都具有相同的 var 名称。那么我如何访问一个特定的按钮呢？
@KeshviSrivastava — 您知道如何使用btnUpdate.id = 'update0'; 设置您要设置的特定按钮的id 属性吗？在用新值覆盖btnUpdate 变量之前，你会得到正确的按钮吗？同样的方式。
对不起，我还是不明白。你能编辑代码并在这里分享吗？

【解决方案4】：

试试这个：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
btnUpdate.addEventListener("click", (e) => {
   // this linked to btnUpdate
   // Here make whatever you want
   // You can call edit_row now
   edit_row(0)
})

【讨论】：

【解决方案5】：

您的按钮似乎还没有在 DOM 中，因此您无法使用document 找到它。你可以使用变量btnUpdate，如果它在同一个文件中，比如btnUpdate.onclick = function() {}，或者使用addEventListener，比如btnUpdate.addEventListener('click', function() {})。

另外，您似乎正在执行edit_row(0) 函数。你需要把它放在一个函数中，比如

btnUpdate.addEventListener('click', function() {
  edit_row(0);
})

【讨论】：

【解决方案6】：

当你在末尾有 () 时调用函数

document.getElementById("update0").onclick = edit_row(0);

将立即调用edit_row

为什么不这样做呢：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.onclick=function() {
   edit_row(this.id.replace("update","")); // or use a data-attribute
}
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);

或使用事件委托：

Native JS equivalent to jquery delegation

【讨论】：