Question

我有一个html表（Bootstrap 3），每行的最后td都有一个按钮。此按钮具有班级btn-add-row。在我使用的Javascript中（来自this问题）：

$('.btn-add-row').click(function() {
    var $tr = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find('input').val('');
    $tr.after($clone);
});

现在，克隆的行也包含该特定按钮。它会毫无问题地复制按钮，但是当您单击添加的行中的按钮时，不会执行javascript。复制的按钮具有类btn-add-row，并且最初已在页面上的单击按钮仍然有效。

如何解决此问题？

Answer 1

你必须在这里选择。首先为克隆行添加点击处理程序

function clickHandler() {
  var $tr = $(this).closest('tr');
  var $clone = $tr.clone();
  $clone.find('.btn-add-row').click(clickHandler);
  $clone.find('input').val('');
  $tr.after($clone);
}
$('.btn-add-row').click(clickHandler);

另一个使用event delegation

$( "table" ).on( "click", ".btn-add-row", clickHandler);

jQuery克隆表行中断按钮

1 个答案: