表格行中断按钮的jQuery克隆

Question

I have a html table (Bootstrap 3) which has a button in its last td of each row. This button has a class btn-add-row . In my Javascript I use (from this question):

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

Now, the row which is cloned also contains that specific button. It copies the button without issue, but when you click the button in the row which was added, the javascript is not executed. The copied button does have the class btn-add-row , and clicking buttons which were originally already on the page still work.

How can I fix this issue?

Answer 1

You have to options here. First to add click handler for cloned row

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);

And the other to use event delegation

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