Bootstrap 4 Beta2+jQuery实现按钮loading-text效果失败求助

你的问题核心在于Bootstrap 4已经彻底移除了Bootstrap 3里内置的按钮状态切换API——包括button('loading')方法和data-loading-text属性，所以你原来的代码自然不会触发加载状态的变化。下面给你两种实用的自定义实现方案：

方案1：简洁文本切换版 #

步骤1：调整HTML结构 #

把按钮的正常文本单独套入一个<span>，方便后续隐藏切换：

<div>
  <button type="button" class="btn btn-primary btn-lg" id="submitOrderBtn">
    <span class="btn-normal-text">Submit Order</span>
  </button>
</div>

步骤2：添加CSS样式 #

定义加载状态的视觉效果，同时禁用按钮交互：

/* 加载状态下禁用点击、修改光标并降低透明度 */
.btn.loading-state {
  pointer-events: none;
  cursor: wait;
  opacity: 0.8;
}
/* 隐藏正常文本 */
.btn.loading-state .btn-normal-text {
  display: none;
}
/* 显示加载提示文本 */
.btn.loading-state::after {
  content: "loading...";
}

步骤3：修改jQuery逻辑 #

通过添加/移除类来切换按钮状态：

$(document).ready(function() {
  $('#submitOrderBtn').on('click', function() {
    var $btn = $(this);
    // 切换到加载状态
    $btn.addClass('loading-state').prop('disabled', true);
    // 模拟异步操作完成后重置状态
    setTimeout(function() {
      $btn.removeClass('loading-state').prop('disabled', false);
    }, 8000);
  });
});

方案2：带Spinner动画的加载效果 #

如果想要更直观的加载动画，Bootstrap 4 Beta 2已经支持基础的spinner组件，可以整合进去：

步骤1：更新HTML结构 #

添加默认隐藏的spinner元素：

<div>
  <button type="button" class="btn btn-primary btn-lg" id="submitOrderBtn">
    <span class="btn-normal-text">Submit Order</span>
    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
  </button>
</div>

步骤2：调整CSS样式 #

.btn.loading-state {
  pointer-events: none;
  cursor: wait;
  opacity: 0.8;
}
.btn.loading-state .btn-normal-text {
  display: none;
}
/* 显示spinner动画 */
.btn.loading-state .spinner-border {
  display: inline-block !important;
}
/* 加载文本与spinner对齐 */
.btn.loading-state::after {
  content: "loading...";
  margin-left: 0.5rem;
}

步骤3：jQuery逻辑和方案1一致 #

同样通过切换loading-state类来控制按钮状态。

补充说明 #

Bootstrap 4团队在重构时移除了这类“开箱即用”的组件状态API，目的是让开发者更灵活地自定义组件行为，避免内置逻辑限制场景需求。所以你需要通过自定义类、文本元素来实现加载状态的切换。

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