应使用html()或innerhtml而非text()或innertext来更新含图标或复杂结构的按钮文字，同时必须设置disabled属性以实现视觉禁用，并在异步完成后通过finally统一恢复状态。

点击后按钮文字不更新？检查是否用了 text() 而非 html()

Bootstrap 按钮本身不管理文字状态，靠 JS 控制。常见错误是用 text() 设置内容，结果图标（如 <i class="bi bi-check"></i>）被清空——text() 会转义 HTML，html() 才保留标签。如果按钮里嵌了图标或需要保留内联样式，必须用 html()。

使用场景：提交按钮切换为“提交中…”、开关类按钮（“启用” ⇄ “禁用”）。

• 用 html() 替代 text()，尤其当按钮含图标或复杂结构时
• 原始文字建议存为 data 属性，比如 data-original-text="提交"，避免硬编码或 DOM 查找
• jQuery 示例：

  $('#submitBtn').on('click', function() {
    const $btn = $(this);
    const original = $btn.data('original-text') || $btn.html();
    $btn.html('<i class="bi bi-hourglass"></i> 提交中...').prop('disabled', true);
    // 后续异步完成后再恢复
    // $btn.html(original).prop('disabled', false);
  });

用原生 JS 实现时，innerText 和 innerHTML 怎么选？

原生操作更需注意内容类型。若按钮只有纯文本，innerText 安全；但只要含图标、SVG 或需要保留 class 的内联元素，就必须用 innerHTML。

性能上无明显差异，但兼容性要注意：innerText 在旧版 Firefox 行为不一致（它曾等价于 textContent），而 innerHTML 全平台稳定。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 推荐统一用 innerHTML，减少分支判断
• 用 dataset 存原始值：button.dataset.originalText = button.innerHTML
• 禁用状态记得同步设 disabled 属性，否则用户可重复点击

为什么点击后文字变了但按钮没变灰？disabled 属性漏写了

Bootstrap 按钮的视觉禁用效果（变灰 + 鼠标禁用）完全依赖 disabled 属性，不是靠 CSS 类。只改文字不设 disabled，按钮仍可点击，容易重复提交。

另外，Bootstrap 5+ 默认对 disabled 按钮加了 pointer-events: none，所以光靠 CSS 禁用无效，必须操作属性。

• 务必调用 element.disabled = true（原生）或 .prop('disabled', true)（jQuery）
• 恢复时别只写 disabled = false，要显式移除属性或设为 false，否则某些浏览器缓存状态
• 避免用 addClass('disabled') —— Bootstrap 已废弃该类名，不起作用

异步完成后恢复按钮，怎么避免状态错乱？

最常见坑：多个请求并发、用户快速连点、或请求失败后忘记恢复。不要在 success 回调里直接写恢复逻辑，容易遗漏 error 或 finally 场景。

正确做法是统一收口到 finally（Promise）或 always（jQuery Deferred），确保无论成功失败都重置。

• 用 fetch().then().catch().finally() 包裹按钮状态切换
• 恢复前先检查按钮是否还挂载在 DOM 中（防内存泄漏或路由跳转后操作已销毁节点）
• 如果按钮文字依赖服务端返回（如“已订阅”/“已取消”），别在 JS 里硬编码，应由接口返回新文案字段

实际项目里，最易忽略的是「状态与 DOM 生命周期不同步」——比如用户切走页面，请求还在跑，回来时按钮状态早已过期。这类问题没法靠单次点击逻辑解决，得结合 AbortController 或组件级状态管理。