javascript - 为什么我必须双击按钮才能工作？

Question

我需要在用户单击按钮时向表中添加一行，并且还需要一个删除按钮来删除添加的行。

当点击按钮时，没有任何反应。只有第二次点击按钮，代码才能工作。

我对 HTML 和 Javascript 很陌生，所以我从互联网上获得了代码。

function addRows() {
    $('.splitBtn').on('click', function() {
        $(this).closest('tr').insertBefore($('<tr><td><button class="delBtn" style="width: 30px; padding: 0px;" onclick="deleteRow()">-</button></td><td></td><td></td><td></td></tr>').insertBefore($(this).closest('tr')));
        $(this).closest('tr').remove(1);
    });
}

我已经包含了“$(this).closest('tr').remove(1);”后来因为某些原因重复和增加了行(现在不是问题)。我还注意到 insertBefore 和 insertAfter 是倒置的(如果我理解正确的话)。 InsertAfter 在当前行的顶部添加行，insertBefore 在当前行的下方添加行。

如果有人可以提供帮助让我只需单击一次即可使按钮正常工作，我会很棒。

Answer 1

仅使用

$('.splitBtn').on('click', function(){
    $(this).closest('tr').insertBefore($('<tr><td><button class="delBtn" style="width: 30px; padding: 0px;" onclick="deleteRow()">-</button></td><td></td><td></td><td></td></tr>').insertBefore($(this).closest('tr')));
    $(this).closest('tr').remove(1);
});

并从按钮的 html 代码中删除 onclick

当你第一次点击你的函数 addRows 运行时，这个函数向按钮添加监听器，所以监听器在第一次点击后才开始工作所以当你第二次点击时监听器添加行

或者使用下面的代码删除 jQuery 监听器并仅使用函数 addRows onclick

function addRows(){
    $(this).closest('tr').insertBefore($('<tr><td><button class="delBtn" style="width: 30px; padding: 0px;" onclick="deleteRow()">-</button></td><td></td><td></td><td></td></tr>').insertBefore($(this).closest('tr')));
    $(this).closest('tr').remove(1);
}