Question

当用户单击按钮时，我需要向表中添加一行，并且还具有一个删除按钮以删除已添加的行。

单击按钮时，没有任何反应。仅第二次单击该按钮，此代码才有效。

我对HTML和Java脚本非常陌生，因此我从互联网上获得了代码。

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

Answer 2

我在JSFiddle http://jsfiddle.net/rplantiko/cDa3N/上找到了解决方案。

这段代码：

$('.splitBtn').on('click', function() {

必须替换为：

$(document).on("click", '.splitBtn', function () {

为什么必须双击按钮才能起作用？

2 个答案: