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) {

因此，每次您单击“重新分配单位按钮”时，都会在“提交重新分配”按钮上创建一个 new 单击处理程序。如果单击一次前一个按钮，则下次单击后一个按钮时，将调用该处理程序一次。再次单击前一个按钮时，下次单击后一个按钮时，将调用处理程序两次。依此类推。

为什么根本需要在另一个点击处理程序中分配点击处理程序？加载文档后只需分配一次即可。也许是这样的：

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

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

提交按钮增加了提交数量

1 个答案: