无法使用使用 jQuery 的动态添加按钮添加新单元格 [重复]答案

【问题标题】：Can't add new cells using dynamically added buttons using jQuery [duplicate]无法使用使用 jQuery 的动态添加按钮添加新单元格 [重复]
【发布时间】：2018-05-22 06:25:22
【问题描述】：

我有一个带有 JavaScript 代码的 HTML 文件，当用户单击文档中类名称为 addCell 的任何其他按钮时，它应该使用按钮将新单元格添加到表格中：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.addCell').click(function() {
        addNewRow(this);
    });   
});   
function addNewRow(Sender)
{
    var tbl = document.getElementById('testt');
    var r = tbl.insertRow(tbl.rows.length);
    var c1 = r.insertCell(0);
    c1.className = "addCell";
    c1.innerHTML = "<button class=\"addCell\">New cell by " + Sender.innerHTML + "</button>";
} 
</script>
</head>
<body>
<table border="1" id="testt">
    <tr>
        <td><button class="addCell">AddNew 1</button></td>
    </tr>
    <tr>
        <td><button class="addCell">AddNew 2</button></td>
    </tr>
</table>
</body>
</html>

当我点击类 addCell 的按钮时，在设计时保存在 HTML 文档中，我的代码运行良好。

但是，当我单击由我的脚本在运行时添加的具有相同类名的新按钮时，什么也没有发生。

我使用类名，通过jQuery添加按钮，onclick方法，因为按钮的数量是无限的，并且写入所有按钮，属性onclick带有函数名称，不是优化个人代码的最佳方法。

我做错了什么？请帮助我更改此代码以正常工作。

【问题讨论】：

继续阅读 Event Delegation

标签： javascript jquery html html-table cell

【解决方案1】：

我认为您需要对动态附加元素使用事件委托 https://learn.jquery.com/events/event-delegation/

代替

$('.addCell').click(function() {
    addNewRow(this);
});

试试这个

$(document).on('click','.addCell',function(){
    foo();
});

【讨论】：