javascript - 提交按钮增加提交数量
问题描述
我有一个按钮可以打开一个模式,该模式有一个带有一些选择器的表单,然后是一个触发确认框的提交按钮。(注意:仅当通过复选框在表格中选择了行时,模式才会打开)。该功能在大多数情况下都按预期工作。我注意到,如果我退出模态,更改表格中的选择,重新单击打开模态的按钮并单击提交,确认框会弹出两次。如果我关闭 modal 再打开,确认框会弹出 3 次,以此类推。我不确定它为什么这样做。(表和选择器是动态创建的)
HTML:
<!-- Reassign Unit Button -->
<button id='reassign_unit_button'>Reassign Unit</button>
<!-- Reassign Unit Modal -->
<div id="reassignModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Reassign Unit</h2>
</div>
<div class="modal-body">
<form id="reassign_unit_form">
<label><strong>Office: </strong></label>
<select id="reassign_unit_geo">
</select>
<label><strong>Customer: </strong></label>
<select id="reassign_unit_customer">
</select>
<label><strong>Frimware: </strong></label>
<select disabled='disabled' id="reassign_unit_fw">
<option selected="selected" value="0">Select firmware version...</option>
</select>
<button id="submit_reassign" type="submit">Submit</button>
</form>
</div>
</div>
</div>
JavaScript:
$(document.ready(function() {
var modal = document.getElementById('reassignModal');
$('#reassign_unit_button').on('click', function() {
if ($('.opt:checkbox:checked').length === 0) {
alert('No units selected for reassignment. Please check the checkbox of the unit(s) you would like to reassign from the [Units Table].');
} else {
// code for selector listeners
// When submit clicked
$('#submit_reassign').on('click', function(event) {
event.preventDefault();
var $units = $('.opt:checkbox:checked').length; //.opt class is on all checkboxes in table
if(confirm("Are you sure you want to reassign ["+$units+"] units?")) {
// Get all selected units
$('.opt:checkbox:checked').each(function() {
var $id = $(this).val();
var $mac = $('#customer_table_mac_'+$id).text();
$.ajax({
cache: false,
url:'reassign_unit.php',
method:'POST',
data:{
reassign_geo:$geo, //$geo, $cus, $fw, and $ver are set elsewhere
reassign_customer:$cus,
reassign_fw:$fw,
reassign_ver:$ver,
reassign_mac:$mac,
},
success: function(data) {
if (data !== '') { alert(data); }
},
});
});
}
});
}
});
});
解决方案
每次点击这个:
$('#reassign_unit_button').on('click', function() {
发生什么了?你来做这件事:
$('#submit_reassign').on('click', function(event) {
因此,每次单击“重新分配单元按钮”时,都会在“提交重新分配”按钮上创建一个新的单击处理程序。如果您单击前一个按钮一次,那么下次单击后一个按钮时,您将调用该处理程序一次。当您再次单击前一个按钮时,下次单击后一个按钮时,您将调用处理程序两次。等等。
为什么你需要在另一个点击处理程序中分配点击处理程序?只需在文档加载时分配一次。也许是这样的:
$(document.ready(function() {
$('#reassign_unit_button').on('click', function() {
if ($('.opt:checkbox:checked').length === 0) {
alert('No units selected for reassignment. Please check the checkbox of the unit(s) you would like to reassign from the [Units Table].');
}
});
$('#submit_reassign').on('click', function(event) {
// your existing click handler
});
// anything else you want to do when the document loads, etc.
});
因此,您的整个应用程序中可能还有其他逻辑需要调整,我无法在此上下文之外进行精确调试,但想法本身应该很清楚。在页面加载时创建您的事件侦听器,仅此而已,不要在您的逻辑中动态地重新创建它们。
推荐阅读
- ms-access - 在 Access 中为 Search-As-You-Type 截断尾随空格
- amazon-web-services - AWS CodeBuild - 泊坞窗:未找到
- php - PHPDoc - 输入变量以查看静态方法
- c - 为什么 strcmp 在 C 编程中有时会在其输入字符串的末尾添加一个字符?
- excel - 使用 VBA 从 SIDRA(巴西)获取数据
- datepicker - 如何捕捉清晰日期选择器的变化
- paperjs - 如何在 Paper.js 的路径中选择单个曲线?
- gitignore - Github - gitignore 文件夹不排除所有目录文件
- javascript - 巴西电话号码的正则表达式
- date - grails 3.3.x java.sql.Date 属性类型不匹配