时间戳

首页 > 解决方案 > 错误：在动态填充表的情况下未定义事件

javascript - 错误：在动态填充表的情况下未定义事件

问题描述

我有一个通过 javascript 动态创建的表 -

function populateTable(data) {

    const responseLength = data.length;

    if (responseLength) {

        var col = [];

            col.push("S. No.");

            for (var i=0; i<data.length; i++) {
                for (var key in data[i]) {
                    if (col.indexOf(key) === -1 && key == "name") {
                        col.push(key);
                    }
                }
            }

            col.push(" ");

            var table = document.createElement("table");

            var tr = table.insertRow(-1);

            for (var i=0; i<col.length; i++) {
                var th = document.createElement("th");

                if (col[i] == "name") {
                    th.innerHTML = "Name";
                    tr.appendChild(th);
                } else {
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }
            }

            for (var i=data.length-1; i>=0; i--) {
                tr = table.insertRow(-1);

                for (var j=0; j<col.length; j++) {
                    var tabCell = tr.insertCell(-1);

                    if (j == 0) {
                        tabCell.innerHTML = ((data.length-1) - i)+1;
                    } else if (j == 2) {
                        tabCell.id = data[i].id;
                        tabCell.style.textDecoration = "underline";
                        tabCell.style.cursor = "pointer";
                        tabCell.addEventListener('click', deleteSubCategory, false)
                        tabCell.innerHTML = "Delete";
                    } else {
                        tabCell.innerHTML = data[i][col[j]];
                    }
                }
            }

            var divContainer = document.getElementById("subCategoriesTable");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
    }
}

表格是表格内的地方 -

<div id="section-two">
    <div class="at-form">
        <form id="edit-categories-form">
            <label id="category-label">Category Name:</label><br>
            <input type="text" name="category" value="" required placeholder="Ex. Class V"><br>

            <label id="sub-category-label">Add Sub-Category (multiple names can be comma separated):</label><br>
            <input type="text" name="sub-category" value="" required placeholder="Ex. History, English, Maths"><br>

            <label>Existing Sub-Categories:</label><br>
            <div id="subCategoriesTable"></div><br><br>

            <input type="submit" name="submit" value="Done">
        </form>
    </div>
</div>

click事件发生时调用的函数-

function deleteSubCategory(event) {
    var id = event.currentTarget.id;
    deleteSubCategory(id);
}

但是，我收到以下错误 -

Uncaught TypeError: event is undefined
    deleteSubCategory http://localhost:8080/js/categories/editcategory.js:144
    deleteSubCategory http://localhost:8080/js/categories/editcategory.js:145
    populateTable http://localhost:8080/js/categories/editcategory.js:79
    getLinkedSubCategories http://localhost:8080/js/categories/editcategory.js:112
    async* http://localhost:8080/js/categories/editcategory.js:14
    EventListener.handleEvent* http://localhost:8080/js/categories/editcategory.js:1

我有其他页面使用相同的方法并且它按预期工作。但是，在这种特殊情况下，它失败了。知道哪里出了问题吗？

标签： javascripthtml

解决方案

function deleteSubCategory(event) {
  var id = event.currentTarget.id;
  deleteSubCategory(id);
}

这里，deleteSubCategory是一个递归函数（它调用自己）。

  • 第一次，它通过了一个event. 它从那个事件中提取一个id，然后用那个调用自己id。
  • 然后，它尝试从中提取一个 id id。它得到undefined. 它再次调用自己，undefined
  • 然后，(undefined).currentTarget导致错误

推荐阅读