如何为以编程方式创建的按钮添加 onclick 功能答案

【问题标题】：How to add onclick function for programmatically created button如何为以编程方式创建的按钮添加 onclick 功能
【发布时间】：2012-11-09 19:18:28
【问题描述】：

我有一个表格，其中我在单击按钮时使用 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 事件，以便如果我单击删除按钮，相应的行将被删除？

【问题讨论】：

标签： jquery html

【解决方案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(); 
});

【讨论】：

一个简单的问题，是否可以使用按钮的 id 而不是类？比如 $("#tblProducts").on('click', '"btnRemove' + counter + '"', function() { $('#btnRemove' + counter).closest('tr').remove() ;
@user1597438, 为此你应该试试这个.. $("#tblProducts").on('click', '[Id^=btnRemove]', function(){ $(this) .closest('tr').remove(); });
我不确定我是否正确地遵循了你，但我现在要做的是从选定的行中获取数据并将其传递到数据库中，以便它可以从数据库中删除所述数据.基本上，我现在要做的是从数据库中名称与文本框中输入的名称匹配的数量中减去输入的数量。现在，我需要在单击动态按钮时恢复它。它应该从选定的行中获取产品和数量的表数据，并将其传递给 MVC.Net，由它负责数据库更新。

【解决方案2】：

两个选项，您可以注册对表格或单个按钮（行）的单击。如果您有大量的行，并且因此有大量按钮，那么注册对表的点击以减少系统中的侦听器可能是有意义的。

如果您想以编程方式在任何新创建的项目上注册事件，您可以执行以下操作：

var $myItem = $('<input type="button"/>');
$myItem.on('click', function(e) {});

【讨论】：

【解决方案3】：

使用.on() 为点击附加事件处理程序。

$("#dynamicButton").on("click", function(e) { });

【讨论】：

【解决方案4】：

$(document).on("click", "#dynamicButton", function(e) { });

【讨论】：

【解决方案5】：

如果您为每一行提供一个包含计数器变量的 ID，以便每个 ID 都基于当时的计数，那么您可以轻松地通过单击的行的 ID 删除。

【讨论】：

【解决方案6】：

我使用以下代码进行添加：

var tbl= document.getElementById('tgtbl'); var tblrow = tbl.insertRow(tbl.rows.length);
var cell1 = tblrow.insertCell(0); cell1.innerText = tname; cell1.textContent = tname;
var cell2 = tblrow.insertCell(1); cell2.innerText = tvalue; cell2.textContent = tvalue;
var cell3 = tblrow.insertCell(2); cell3.innerHTML = '<a href="#" onclick="removerow(' + (tbl.rows.length - 1) + ')">Remove</a>';

对于删除（tdata 是隐藏字段）：

    var tbl = document.getElementById('tgtbl');
var tname = tbl.rows.item(rowindex).childNodes.item(0).innerText;
var idx = tdata.value.indexOf(tname.toLowerCase());
if (idx != -1) { tbl.deleteRow(rowindex);
  var tgd = tdata.value; tdata.value = tgd.substring(0, idx); tgd = tgd.substring(idx);
  if (tgd.indexOf(';') != -1) { tdata.value = tdata.value + tgd.substring(tgd.indexOf(';') + 1); }
for (i = 1; i < tbl.rows.length; i++) {
    tbl.rows.item(i).childNodes.item(2).innerHTML = '<a href="#" onclick="removerow(' + i + ')">Remove</a>'; }
}

我知道我没有使用过 jquery，但“删除”代码会给出一个想法

【讨论】：

【解决方案7】：

 $('#btnRemove').live ('click', function () {
       $(this).closest('tr').remove();
 });

【讨论】：

虽然这是一篇旧文章，但它仍然出现在谷歌搜索结果中，所以我想我会发表评论。从 1.7 开始不推荐使用 live 并在 1.9 中删除，您应该使用 on。