动态创建的文本框编号在每次加载页面时都会增加
用户名
我在前端有一个表格，单击按钮后会将多个文本框附加到表格中。这是我正在使用的事件：
//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" /> </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> </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 />');
});
目前，上述方法也适用。问题是，说我导航到另一个链接，然后回来题库局部视图，点击加号（+）均匀地创建文本框，每次这意味着双控（如果它应该创建一个文本框选项的一个部分点击）。随附以下屏幕截图：
我试图删除或清除页面加载时的控件，但失败，并显示以下内容：
$("#txtOptions").empty();
$("#txtAnswers").empty();
有什么办法可以克服吗？
注意：网址-用户登录；用户[email protected]; 密码-123456; 导航到问题库，然后单击（+）号。再次导航到另一页面并返回同一页面。再次单击（+）号。
丹尼尔·曼塔（Daniel Manta）
问题在于此代码在其中运行，$(document).ready()因此当您回来时，它将为click事件绑定新的处理程序。最后，您将获得多个单击处理程序，每个单击处理程序将添加一行。尝试通过调用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 />');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在ASP页面加载时通过文本框中的用户给定值创建动态链接按钮？
- 2
如何在文本框中创建发票编号并在单击按钮时自动增加发票编号？
- 3
如何在文本框中创建发票编号并在单击按钮时自动增加发票编号？
- 4
创建文本框并在页面加载时插入数据
- 5
JQuery在单击按钮时创建动态文本框
- 6
每次用户单击Windows Phone中的按钮时，如何增加文本框的值？
- 7
如何使用jQuery创建带有编号的动态文本框？
- 8
Firefox在每次加载页面时都会添加随机脚本
- 9
django每次单击页面时都会重新加载变量
- 10
保存动态创建的文本框的值
- 11
获取动态创建的文本框的价值
- 12
动态创建输入文本框
- 13
样式化动态创建的文本框
- 14
如何创建动态文本框
- 15
动态创建的文本框的警报值
- 16
获取动态创建的文本框的值
- 17
如何防止页面加载以清除我动态添加的文本框
- 18
尝试通过Selenium Python选择输入框，但是每次重新加载页面时元素中的“ id”都会更改
- 19
javascript-添加另一个文本框时，动态创建的文本框的值消失
- 20
页面加载AngularJS时，文本框绑定不起作用
- 21
页面加载时根据 RadioButton 选择或值显示文本框
- 22
将值分配给加载页面中的文本框时无法更新数据
- 23
仅当文本框为空时自动重新加载页面
- 24
每次聚焦文本框时如何打开表单？
- 25
提交表单时检索动态创建的html输入文本框
- 26
如何在选择下拉列表时动态创建文本框
- 27
单击按钮时更改动态创建的文本框的值 C#
- 28
如何获取动态创建的文本框的文本值
- 29
如何获取动态创建的文本框的文本值
我来说两句