如何为以编程方式创建的按钮添加 onclick 函数

Question

我有一个表，其中单击按钮时使用 javascript 添加行。这是我的代码：

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + ("#txtQty").val()  "</td><td><input type='button' value='Remove' id='btnRemove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

我的问题是，因为我在每行添加删除按钮，因此将其包含在变量 newRow 中，如何为其添加 onClick 事件，以便如果我单击删除按钮，相应的行将被删除？

Answer 1

首先在动态按钮上放置一个公共类

<input type='button' value='Remove' class='remove' />如果您想要 id，请为您的输入按钮提供一个唯一的 id 。您可以使用代码中使用的计数器变量来创建唯一的ID。

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + $("#txtQty").val() + "</td><td><input type='button' value='Remove' id='btnRemove"+counter+"' class='remove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

并添加以下代码，它将删除删除按钮的父行。

 $("#tblProducts").on('click', '.remove', function(){
       $(this).closest('tr').remove();
 })

或者，如果您正在生成动态 id，则可以将其更改为与 id 一起使用，例如

$("#tblProducts").on('click', '[id^=btnRemove]', function(){
     $(this).closest('tr').remove(); 
});