我有一个引导开关和一个带有 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');
}
});
});
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_"]
元素上不再有任何侦听器。