如何正确使用 HTML 表格单元格内的按钮答案

【问题标题】：How to correctly use of buttons inside HTML table cells如何正确使用 HTML 表格单元格内的按钮
【发布时间】：2020-10-09 13:06:11
【问题描述】：

在我的 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);
});
}

但是我发现在.on('click') 函数中使用时只有第一个按钮起作用（如下所示）：

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

我曾尝试（手动）将按钮更改为 #idBtnOpenPad2 或 #idBtnOpenPad3 等，但它根本没有触发。

为了清楚起见，我在这里复制表格的部分图像：

问题是：

如何正确使用表格单元格内的按钮，让它们各自独立发挥作用？

【问题讨论】：

使用$(document).on("click","yourbuttonclass",function(){//your code})。也可以看看this的帖子。
@Swati：谢谢。有用。您能否给我一个关于尽管记住文档可能不是最有效的选择。如您发布的链接中所述的提示？如果我要使用另一个对象，那会是什么？我尝试使用id 代替document 的表格，它仍然有效。我需要花一些时间在这上面，我相信。 PS。您可能想发布此（您的评论）作为对我的查询的回答。
嗨，不是在您的代码中动态生成的元素，您可以使用该元素代替 document ，即：您的表格、正文、某些 div 等。
@Swati：谢谢。完全错过了它，因为它清楚地指出：（事件附加到应该处理的元素的静态父级（staticAncestors）。），在最开始的段落中。
@Swati - 我想结束这个问题，但不确定我是否应该将解决方案作为我的答案发布，因为方向来自你。您能否通过发布您的解决方案作为答案来帮助我，以便我可以关闭它。谢谢。

标签： jquery button html-table

【解决方案1】：

正如@Swati 所建议的，现在我使用class 而不是id，就像这样（方法1）：

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

或者我们也可以使用这个（方法2）：

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

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

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

【讨论】：