Django项目中提交按钮Bootstrap Spinner移除类后仍不显示求助

核心问题：按钮文本替换导致Spinner元素被删除 #

你在JS中执行了document.getElementById('submitButton').innerText = 'Processing...';，这行代码会完全覆盖按钮内部的所有内容，包括原本存在的<span id="spinner-box">元素。虽然你移除了not-visible类，但Spinner节点已经被innerText的赋值操作删掉了，自然无法显示。

修复步骤 #

1. 重构按钮结构，将按钮文本单独放在一个span中：

<button class="btn btn-primary" type="submit" id="submitButton">
  <span id="spinner-box" class="spinner-border spinner-border-sm not-visible" role="status" aria-hidden="true"></span>
  <span id="button-text">Submit...</span>
</button>

2. 修改JS代码，只更新文本span的内容，而不是整个按钮的innerText：

document.getElementById('pdfUploadForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    console.log(document.getElementById('spinner-box').classList); 
    document.getElementById('spinner-box').classList.remove('not-visible');
    console.log(document.getElementById('spinner-box').classList);
    // 只修改文本span的内容
    document.getElementById('button-text').innerText = 'Processing...'; 
    // 后续的表单提交逻辑...
});

额外排查点（如果修复后仍有问题） #

• 检查CSS优先级：确保没有其他更高优先级的样式覆盖了Spinner的display属性（比如父元素的display设置，或者其他!important样式）。
• 确认Bootstrap样式正确加载：打开浏览器开发者工具，查看Spinner元素的computed样式，确认display: inline-block生效，且Bootstrap的spinner相关样式（如border动画）已正确应用。

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