每次页面加载时动态创建的文本框数量都会增加

Question

我在前端有一个表格，其中多个文本框在按钮单击时附加到表格中。这是我正在使用的事件：

//Add row to the table
$('#btnAdd').on('click', function () {
     var $clone = $('#tblQuesAns tbody tr:last').clone();
     $clone.find('input').val('')
     $('#tblQuesAns tbody').append('<tr><td><input type="text" class="txtQuestionName form-control" placeholder="Input Name" /> &nbsp;</td> <td><input type="text" class="txtOptions form-control" placeholder="Input Value" /><span class="addOptions">(+)</span></td> <td><input type="text" class="txtAnswers form-control" class="form-control" placeholder="Input Value" /> <a href="javascript:void(0);" class="btn btn-danger remCF">Remove</a></td> &nbsp;</tr>');  
});

以上内容完美，因此每次单击“添加”按钮时都会添加新行。 选项和答案文本框中还有两个按钮。因此，单击它们，会在同一列中创建其他文本框。因此，为了控制动态控制，在绑定事件的地方使用以下内容：

//Add more rows for option
$('body').on('click', '.addOptions', function () {
    $(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});

//Add more rows for answer
$('body').on('click', '.addAnswers', function () {
    $(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});

目前，上述方法也有效。问题是，假设我导航到另一个链接并返回到 Question Bank 部分视图，单击加号 (+) 每次都会创建均匀的文本框，这意味着双控件（它应该为 Options 部分创建一个文本框，一键单击）。下面附上截图：

我试图删除或清除页面加载控件，但失败了：

$("#txtOptions").empty();
$("#txtAnswers").empty();

有什么办法可以克服吗？

Answer 1

问题是这段代码在$(document).ready() 中运行，所以当你回来时，它会为点击事件绑定新的处理程序。您最终会得到多个单击处理程序，并且每个单击处理程序都会添加一行。如果有的话，请尝试通过调用 off() 方法删除现有的点击处理程序。

//Add more rows for option
$('body').off('.addOptions').on('click', '.addOptions', function () {
    $(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});

//Add more rows for answer
$('body').off('.addAnswers').on('click', '.addAnswers', function () {
    $(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});