Bootstrap切换按钮Ajax失败时回退状态避免循环方案问询

你遇到的循环问题根源很明确：在error回调里调用$('#toggle-verify-mobile').click()会再次触发按钮的点击事件，而这个事件又会重新发起Ajax请求，如此往复就陷入了无限循环。

正确的做法是直接手动恢复按钮的初始状态，而不是模拟点击操作——毕竟Bootstrap的切换按钮状态本质上就是靠active类和aria-pressed属性来控制的，我们直接修改这些即可，不需要触发事件。

修正后的jQuery代码 #

$(function() {
  $("#toggle-verify-mobile").on("click", function(event) {
    event.preventDefault();
    $('#toggle-verify-mobile-error').html('<br/>')
    var $btn = $(this); // 缓存按钮元素，避免重复DOM查询
    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
    var current_state = $btn.hasClass('active');
    
    // 可选：请求期间禁用按钮，防止重复点击
    $btn.prop('disabled', true);

    $.ajax({
      type: "POST",
      url: "{% url 'my_app:ajax_skip_mobile_verification' %}",
      data: {
        'current_state': current_state,
        'csrfmiddlewaretoken': csrf
      },
      dataType: 'json',
      success: function (data) {
        // Success stuff here
      },
      error: function(xhr, textStatus, errorThrown){
        // 直接恢复初始状态，不触发点击事件
        if (current_state) {
          // 初始状态是active，回退时保留active类和aria-pressed=true
          $btn.addClass("active").attr("aria-pressed", "true");
        } else {
          // 初始状态不是active，回退时移除类并设置aria-pressed=false
          $btn.removeClass("active").attr("aria-pressed", "false");
        }
        // 可选：添加明确的错误提示
        $('#toggle-verify-mobile-error').html('<br/>请求失败，请检查网络连接后重试');
      },
      complete: function() {
        // 请求完成（无论成功失败）重新启用按钮
        $btn.prop('disabled', false);
      }
    });
  });
});

关键改动说明 #

• 缓存按钮元素：用$btn变量存储$(this)，减少重复DOM查询，提升性能。
• 直接修改状态属性：在error回调里直接操作active类和aria-pressed属性，完全避免触发点击事件，从根源上解决循环问题。
• 添加按钮禁用逻辑：请求发起时禁用按钮，完成后恢复，防止用户在请求未结束时重复点击，进一步避免意外问题。
• 优化错误提示：在错误回调里添加用户友好的提示，提升交互体验。

这样修改后，当Ajax请求失败时，按钮会直接回退到初始状态，不会触发新的请求，完美解决循环问题。

内容的提问来源于stack exchange，提问作者Hashim