如何在后台进程期间为模态框中的按钮添加加载Spinner？

问题根源 #

1. 重复ID冲突：你给循环生成的多个模态框按钮用了同一个id="btn-delete"，HTML中ID必须唯一，导致只有第一个按钮能触发事件，其他模态框内的按钮完全无效。
2. 默认跳转打断操作：<a>标签点击会立即触发页面跳转，修改按钮内容的代码还没完成渲染就跳转了，所以看不到加载状态变化。

修改步骤 #

1. 修正HTML按钮标识

把按钮的id改为class，确保每个模态框的按钮都能被正确选中：

<a href="{% url 'delete_application' share.share.Name share.share.Path item.Name %}" class="btn btn-danger btn-delete">Confirm</a>

2. 重写JavaScript逻辑

阻止默认跳转，先更新按钮状态，再手动触发跳转：

$(document).ready(function(){
  $('.btn-delete').on('click', function (e) {
    // 阻止<a>标签的默认跳转行为
    e.preventDefault();
    const $button = $(this);
    
    // 替换按钮内容为加载状态（用Bootstrap 4的spinner组件）
    $button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
    // 禁用按钮防止重复点击
    $button.prop('disabled', true);
    
    // 延迟100ms后跳转，确保用户能看到加载状态
    setTimeout(() => {
      window.location.href = $button.attr('href');
    }, 100);
  });
});

说明 #

• 用class替代id后，所有模态框内的删除按钮都能绑定点击事件。
• 阻止默认跳转后，有足够时间渲染加载状态，再手动跳转到后台接口地址。
• 添加Bootstrap的spinner组件让加载状态更直观，也可以根据需求换成纯文字的"Loading"。

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