javascript - 提交按钮增加提交数量

Question

我有一个按钮，可以打开一个模式，该模式有一个带有一些选择器的表单，然后是一个触发确认框的提交按钮。 (注意:仅当通过复选框在表中选择行时才会打开该模式)。该功能在大多数情况下都按预期工作。我注意到，如果我退出模式，更改表格中的选择，重新单击打开模式的按钮并单击提交，确认框会弹出两次。如果我关闭模态并再次打开它，确认框会弹出三次，依此类推。我不确定它为什么这样做。 (表和选择器是动态创建的)

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">&times;</span>
                <h2>Reassign Unit</h2>
        </div>
        <div class="modal-body">
            <form id="reassign_unit_form">
                <label><strong>Office:&nbsp;</strong></label>
                <select id="reassign_unit_geo">
                </select>
                <label><strong>Customer:&nbsp;</strong></label>
                <select id="reassign_unit_customer">
                </select>
                <label><strong>Frimware:&nbsp;</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); }
                     },
                  });
               });
            }
         });
      }
   });
});

Answer 1

每次点击此按钮时:

$('#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.
});

您的整个应用程序中可能还有其他逻辑需要调整，我无法在此上下文之外进行精确调试，但想法本身应该很清楚。在页面加载时创建事件监听器，仅此而已，不要在逻辑中动态地重新创建它们。