AJAX beforeSend场景下jQuery增删类对btn-hide按钮不生效问题求助

问题根源 #

1. HTML中#btn-hide元素内部的加载spinner标签未正确闭合，导致DOM解析异常，jQuery操作该元素时逻辑失效
2. 类操作逻辑硬编码仅移除固定主题类，未做全量清理，容易出现样式类残留叠加
3. 提交数据的AJAX未区分操作状态，强制给加载按钮加btn-success类，覆盖了编辑场景的btn-info配置
4. 编辑请求的success回调中移除类的目标写错，错误清理了不存在的类，导致样式残留

具体修复步骤 #

1. 修复HTML语法错误 #

修正#btn-hide内部未闭合的span标签：

<div class="modal-footer">
  <input type="hidden" name="hidden_id" id="hidden_id">
  <input type="hidden" id="action">
  <button class="btn btn-sm btn-success d-none" id="btn-hide" type="button" disabled>
    <!-- 修正未闭合的属性和标签 -->
    <span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Saving...
  </button>
  <input type="submit" class="btn btn-sm btn-success" value="Save" id="btn">
  <button type="button" class="btn btn-sm btn-outline-success" data-dismiss="modal" id="btn-cancel">Cancel</button>
</div>

2. 优化编辑点击事件逻辑 #

首先补全id取值逻辑，优化类操作（先清所有可能的主题类再加目标类），同时给隐藏域#action赋值标记当前是编辑状态：

$(document).on('click', '.edit', function () {
    // 补全id取值，根据实际属性名调整，这里假设编辑按钮绑了data-id
    const id = $(this).data('id');
    $.ajax({
        url: '/admin/fungsionaris/guru/edit/'+id,
        dataType: 'JSON',
        beforeSend: function () {
            // 先清所有主题类再添加，避免残留
            $('#btn-hide').removeClass('btn-success btn-info d-none').addClass('btn-info d-inline-block');
            $('#btn').removeClass('btn-success btn-info d-inline-block').addClass('btn-info d-none');
        }, 
        success: function (data) {
            $('#btn-hide').removeClass('btn-success btn-info d-inline-block').addClass('btn-info d-none');
            $('#btn').removeClass('btn-success btn-info d-none').addClass('btn-info d-inline-block').val('Update');
            $('#btn-cancel').removeClass('btn-outline-success btn-outline-info').addClass('btn-outline-info').text('Cancel');
            // 标记当前为编辑状态，提交时用
            $('#action').val('edit');
        }
    });
});

如果是新增场景，记得对应给#action赋值为add

3. 修改提交AJAX逻辑，动态适配操作状态 #

根据#action的值判断当前是新增还是编辑，动态设置加载按钮的主题类：

$.ajax({
    url: url,
    method: 'POST',
    dataType: 'JSON',
    data: $(this).serialize(),
    beforeSend: function () {
        // 读取当前操作状态，动态确定按钮主题
        const currentAction = $('#action').val();
        const themeClass = currentAction === 'edit' ? 'btn-info' : 'btn-success';
        $('#btn-hide').removeClass('btn-success btn-info d-none').addClass(`${themeClass} d-inline-block`);
        $('#btn').removeClass('btn-success btn-info d-inline-block').addClass(`${themeClass} d-none`);
    }, 
    success: function (data) {
        if (data.success) {
            const currentAction = $('#action').val();
            const themeClass = currentAction === 'edit' ? 'btn-info' : 'btn-success';
            $('#btn-hide').removeClass('btn-success btn-info d-inline-block').addClass(`${themeClass} d-none`);
            $('#btn').removeClass('btn-success btn-info d-none').addClass(`${themeClass} d-inline-block`).val(currentAction === 'edit' ? 'Update' : 'Save');
            $('#btn-cancel').removeClass('btn-outline-success btn-outline-info').addClass(currentAction === 'edit' ? 'btn-outline-info' : 'btn-outline-success').text('Cancel');
        }
        $('#form_result').html(html);
    }
});

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