应使用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 全平台稳定。
- 推荐统一用
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 里硬编码，应由接口返回新文案字段
