即使开关处于关闭状态也会调用Ajax调用

Question

我有一个引导开关和一个带有 ajax 调用的 jquery 脚本，只有在选中开关时才应启动该脚本。发生的情况是，当我第一次加载页面时，一切都很好（开关关闭并且 ajax 调用没有启动）。如果我点击开关，ajax 调用就会起作用。如果我再次单击关闭开关，ajax 调用将继续工作。它应该停止。 您可以在下面找到该脚本。 为什么会出现这种情况？

<input class="form-check-input" type="checkbox" role="switch" id="right" >

<script>
$(document).ready(function(){
  var switchStatus = false;
  $('#right').on('change', function() {
    console.log($('#right').is(':checked'));
    if ($(this).is(':checked')) {
      switchStatus = $(this).is(':checked');
      if(switchStatus==true){
        $('input[id*="opr_"]').on("keyup change", function(e) {
          var key_opr = $(this).attr('id');
          //console.log(key_opr);
          var opr = $(this).val();
          //console.log(opr);
          $.ajax({
            url: 'check.php',
            type: 'POST',
            data: jQuery.param({ id_game: "<?=$id_game;?>", opr : opr, key_opr : key_opr}) ,
            success:function(data) {
              //console.log(data);
              if(data==1){
                $("#"+key_opr).removeClass('td_fill').removeClass('td_wrong').addClass('td_good'); 
              }else{
                $("#"+key_opr).removeClass('td_fill').removeClass('td_good').addClass('td_wrong'); 
              }
            }
          });
        });
      }
    }else{
      switchStatus = $(this).is(':checked');
    }
  });
});

Answer 1

else {
         // Turn off the event listener for the 'opr_' inputs when the switch is turned off
         $('input[id*="opr_"]').off("keyup change");
      }

当开关关闭时，使用

.off()

方法删除事件侦听器。这可以防止发起 AJAX 调用，因为这些事件的

input[id*="opr_"]

元素上不再有任何侦听器。