动态修改按钮文本时Bootstrap按钮内Spinner失效问题排查

问题背景 #

我们将各类表单加载至modal中，保存数据时会依据按钮文本执行不同操作（点击‘save’插入新记录，点击‘update’更新已有记录等）。现有两个按钮——‘insert’和‘standard’：打开standard模态框时，按钮内的Spinner可正常工作；但通过代码动态修改按钮文本后，Spinner便失效了。

问题原因 #

使用jQuery的text()方法修改按钮文本时，会直接替换按钮内的所有内容，包括Spinner对应的<span>元素，导致Spinner被删除，自然无法显示。

解决方案 #

方案1：为按钮文本单独设置容器 #

在按钮内给文本单独添加一个<span>容器，修改时仅更新该容器的内容，不影响Spinner元素：

修改HTML中testButton的结构：

<button type="button" id="testButton" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>     
  <span class="btn-text"></span>
</button>

对应JS代码调整：

$('#insertButton').on('click', function() {
  $('#testButton .btn-text').text('Save'); // 仅修改文本容器内容
  $('#testModal').modal('show');
})

方案2：使用html()方法保留Spinner #

若不想修改原有HTML结构，可通过html()方法保留Spinner的HTML结构，再拼接新文本：

$('#insertButton').on('click', function() {
  // 获取Spinner的完整HTML代码
  const spinnerHtml = $('#testButton').find('.spinner-border').prop('outerHTML');
  // 重新设置按钮内容，保留Spinner并添加文本
  $('#testButton').html(`${spinnerHtml} Save`);
  $('#testModal').modal('show');
})

方案3：精准移除并添加文本节点 #

通过过滤节点类型，仅移除按钮内的文本节点，保留Spinner元素后再追加新文本：

$('#insertButton').on('click', function() {
  // 移除按钮内的所有文本节点，保留元素节点（Spinner）
  $('#testButton').contents().filter(function() {
    return this.nodeType === 3;
  }).remove();
  // 追加新文本
  $('#testButton').append(' Save');
  $('#testModal').modal('show');
})

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