Jquery 如何正确使用HTML表格单元格中的按钮

在我的HTML页面中，我在特定列的每一行中都有一个按钮。用户可以在运行时添加新行，这些按钮也会和每行中的其余字段一起插入

将使用以下命令附加这些按钮：

function funcAddBtnOpenPad() {   // This funct being called at page onload
// VARS FOR ADDING BUTTON IN CELL "5"
// STORING BUTTON ATTRIBUTES
var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad', name:'btnOpenPad', value:'OpenPad' });

$('#childTable tr').each(function(tempRowIdx) {
    
// CONSTRUCT TAG FOR BUTTON "OpenPad" IN CELL "5"
    tempButtonCellTag = 'id_tIndx'+tempRowIdx+5;

// HERE WE ARE INSERTING THE BUTTON "OpenPad" <<<<
        $('#'+ tempButtonCellTag).append(btnOpenPad);
        $(this).find("input[type='button']").attr('id', 'idBtnOpenPad'+tempRowIdx);
});
}

$(function() {
    $('#idBtnOpenPad1').on('click', function() {
        alert("OpenPad clicked");
    });
});

我尝试（手动）将按钮更改为

#idBtnOpenPad2

或

#idBtnOpenPad3

等，但根本无法启动

为了清晰起见，我在这里复制了桌子的部分图像：

问题是：

---

如何正确使用表格单元格中的按钮，使每个按钮独立运行？

正如@Swati所建议的，现在我使用的不是

id

，而是

class

，如下所示（方法1）：

或者，我们也可以使用此方法（方法2）：

两者都有效为什么之前它不工作？因为我试图将事件绑定到动态生成的元素。查看详细的解释

---

另外，如前所述，使用第二种方法更好。

使用

$（文档）。在（“单击”，“yourbuttonclass”，function（）{//your code}）

上，也可以查看post。@Swati:谢谢。它起作用了。请你给我介绍一下，但请记住，文件可能不是最有效的选择。如你所发布的链接所述？如果我用另一个物体，那会是什么？我尝试使用表

id

代替

document

，但它仍然有效。我相信我需要花一些时间在这方面。另外，您可能希望将此（您的评论）作为我查询的答案。您好，代码中未动态生成的元素您可以使用这些元素，而不是

文档

，即：您的表、正文、某些div等@Swati:谢谢。完全忽略了它，因为它清楚地指出：（事件附加到应该处理的元素的静态父级（static祖先）。@Swati-我想结束这个问题，但不确定是否应该将解决方案作为我的答案发布，因为方向来自您。你能帮我把你的解决方案贴出来作为答案，这样我就可以把它关闭了。谢谢

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

$('#childTable').on('click', '.clsBtnOpenPad', function() {
    ...
});