动态创建的表格行复选框未触发单击事件

Question

我有一个动态填充行的表，其中一列具有复选框，应该切换该特定行的相关属性。

问题是，我添加到复选框的单击事件仅在页面加载时触发 - 刷新页面时控制台会产生 3 行“False”。 如果我之后选中/取消选中这些框，则控制台没有 output ，因此我假设单击时不会触发事件。

我不希望它在页面加载时触发，我希望它在单击复选框时触发。

下面是产生问题的我的代码的简化版本。

索引.html：

<html>
<head>
<script src="main.js"></script>
</head>
<body>
<table id="table">
<thead><tr><th scope="col">Toggled</th></tr></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>

主.js：

document.addEventListener('DOMContentLoaded', () => {
    AddRow(0);
    AddRow(1);
    AddRow(2);
    
    function AddRow(i) {
        var table = document.getElementById('table');
        var tbody = table.getElementsByTagName('tbody')[0];
        
        var node = document.createElement("tr");
        node.setAttribute("id", i);
        node.innerHTML = `<td><input id='T${i}' type='checkbox' /></td>`;
        tbody.appendChild(node);
        document.getElementById(`T${i}`).addEventListener('click', Toggle(i));
    }
    
    function Toggle(i) {
        if (document.getElementById(`T${i}`).checked) {
            console.log(`True`);
        } else {
            console.log(`False`);
        }
    }
});

Answer 1

每次添加事件时，您都会调用 function 切换。 这就是 Toggle(i) 所做的。 要仅定义要调用的 function 而不实际调用它，只需使用不带括号的 Toggle。

addEventListener('click', Toggle)

但是，这会产生另一个问题，因为您想将参数 i 传递给 function。 为了解决这个问题，定义一个匿名 function 为事件执行，并在该匿名 function 中，调用 Toggle function 并传递参数：

document.getElementById(`T${i}`).addEventListener('click', function() {
  Toggle(i);
});

 document.addEventListener('DOMContentLoaded', () => { AddRow(0); AddRow(1); AddRow(2); function AddRow(i) { var table = document.getElementById('table'); var tbody = table.getElementsByTagName('tbody')[0]; var node = document.createElement("tr"); node.setAttribute("id", i); node.innerHTML = `<td><input id='T${i}' type='checkbox' /></td>`; tbody.appendChild(node); document.getElementById(`T${i}`).addEventListener('click', function() { Toggle(i); }); } function Toggle(i) { if (document.getElementById(`T${i}`).checked) { console.log(`True`); } else { console.log(`False`); } } });

 <table id="table"> <thead> <tr> <th scope="col">Toggled</th> </tr> </thead> <tbody></tbody> </table>

Answer 2

我建议不要将索引传递给点击监听器 function，而是使用 createElement() 并将监听器直接添加到创建的元素中。

这样您就可以直接访问 function 中的元素，而不必对其进行 DOM 查询。

<table>元素还具有内置的insert方法以简化创建行和单元格

 document.addEventListener('DOMContentLoaded', () => { const table = document.getElementById('table'); [0,1,2].forEach(AddRow); console.log('tbody has ', table.tBodies[0].rows.length, ' rows') function AddRow(i) { const row = table.tBodies[0].insertRow(); row.id = 'row_' + i; const checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.id = `T${i}`; checkbox.addEventListener('click', Toggle); row.insertCell().append(checkbox) } function Toggle(event) { console.log(`${this.id} checked: ${this.checked}`); console.log('row id: ', this.closest('tr').id) } });

 <table id="table"> <thead> <tr> <th scope="col">Toggled</th> </tr> </thead> <tbody></tbody> </table>

动态创建的表格行复选框未触发单击事件

问题描述

2 个解决方案

解决方案1
0 2021-04-20 02:30:49

解决方案2
0 2021-04-20 02:55:19

动态创建的表格行复选框未触发单击事件

问题描述

2 个解决方案

解决方案1 0 2021-04-20 02:30:49

解决方案2 0 2021-04-20 02:55:19

解决方案1
0 2021-04-20 02:30:49

解决方案2
0 2021-04-20 02:55:19