jQuery中addClass添加类后样式不渲染，需手动点击才生效

我之前也碰到过类似的浏览器渲染“延迟”问题——明明DOM类已经加上了，但样式就是不生效，得手动点一下页面才出来。结合你的代码和场景，咱们拆解几个可能的原因，以及对应的解决办法：

1. 表单提交的默认行为在“搞鬼” #

你的按钮都是type="submit"，虽然函数最后return false，但有些浏览器的表单提交事件流程可能还是会抢占渲染线程，导致样式更新被延迟。先彻底阻止默认行为试试：

修改你的SetStatus函数，接收event参数并调用preventDefault()：

function SetStatus(button, event) {
  // 先阻止表单提交的默认行为，避免浏览器资源被抢占
  event.preventDefault();
  
  if ($('#' + button.id).prop('value') == 'ALL') {
    $('.optionsbtn').removeClass('btn-bordered');
    $('.optionsbtnall').removeClass('btn-bordered');
    $('#tblData').DataTable().ajax.reload();
    return false;
  } else {
    // 去掉不必要的setTimeout，直接操作类
    $('.optionsbtn').addClass('btn-bordered');
    $('.optionsbtnall').addClass('btn-bordered');
    
    // 强制触发浏览器重绘，比offsetHeight更可靠的方式
    requestAnimationFrame(() => {
      void document.body.offsetWidth;
    });
    
    return false;
  }
}

然后修改所有按钮的onclick属性，传入event：

<input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Pendingbtn" value="Requested" onclick="return SetStatus(this, event);" id="Pendingbtn" class="btn-primary btn btn-xs optionsbtn" title=" Requested">
<!-- 其他按钮同理修改onclick参数 -->

2. 检查CSS样式的优先级是否足够 #

有时候不是没渲染，而是btn-bordered的样式被原有按钮类（比如.btn-primary、.btn-info）的样式覆盖了。你可以检查下btn-bordered的CSS定义，确保它的优先级更高：

/* 给选择器叠加更高优先级，避免被原有样式覆盖 */
.btn.btn-xs.optionsbtn.btn-bordered {
  border: 2px solid #your-target-color;
  /* 你的其他样式定义 */
}

3. 尝试触发浏览器硬件加速 #

有些浏览器对某些样式的渲染会“偷懒”，可以给btn-bordered加上触发硬件加速的属性，强制浏览器即时渲染：

.btn-bordered {
  /* 你的原有样式 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

4. 排除DataTable异步操作的干扰 #

当点击ALL按钮时，你调用了ajax.reload()这个异步操作，可能会打乱页面的渲染队列。如果非ALL状态的样式还是不生效，可以试试在添加类之后，强制刷新DataTable的视图：

// 在addClass之后添加
$('#tblData').DataTable().draw(false);

你可以先从第一步的阻止默认行为开始试，这是这类问题最常见的诱因——submit按钮的默认行为经常会悄悄干扰DOM渲染。

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