如何将AJAX进度条定位在触发操作元素旁？及优化触发元素识别

当前依赖document.activeElement的方案并非最优，存在两个核心问题：

• 可靠性不足：activeElement不一定是触发AJAX的元素（比如触发元素是无焦点的<div>，或AJAX由定时器、表单change事件触发）；
• 布局干扰：将进度条作为同级元素插入会破坏流式布局，导致周边元素移位。

一、准确追踪AJAX触发元素的方案 #

不要依赖全局ajaxStart事件的模糊触发源，而是直接在触发AJAX的事件逻辑中绑定触发元素，再传递给全局AJAX处理逻辑：

方法1：全局变量临时存储（简单直接）

给所有触发AJAX的元素统一标记类名（比如ajax-trigger），在点击事件中记录触发元素：

// 绑定所有AJAX触发元素的点击事件
$('.ajax-trigger').on('click', function() {
  // 临时存储当前触发元素
  window._currentAjaxTrigger = $(this);
  // 执行原有AJAX请求逻辑
  // $.ajax({ ... });
});

在全局AJAX事件中读取该元素并定位进度条：

$(document).on('ajaxStart', function() {
  const $trigger = window._currentAjaxTrigger;
  if (!$trigger) return;

  // 创建进度条元素（推荐将样式写到CSS中）
  const $progressBar = $('<div id="progressBarElem">A moment, please wait...</div>')
    .progressbar({ value: false });

  // 获取触发元素的位置，绝对定位到元素右侧（可自定义位置）
  const elemOffset = $trigger.offset();
  $progressBar.css({
    position: 'absolute',
    top: elemOffset.top + 'px',
    left: elemOffset.left + $trigger.outerWidth() + 10 + 'px',
    display: 'block',
    zIndex: 9999 // 确保进度条在最上层
  });

  // 添加到body，避免干扰触发元素的布局
  $('body').append($progressBar);
});

// AJAX结束后清理进度条和临时变量
$(document).on('ajaxStop', function() {
  $('#progressBarElem').remove();
  window._currentAjaxTrigger = null;
});

方法2：通过AJAX请求上下文绑定（更严谨）

使用$.ajaxPrefilter给AJAX请求附加触发元素上下文，避免全局变量冲突：

// 预处理AJAX请求，存储触发元素
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  if (options.trigger) {
    jqXHR._triggerElement = $(options.trigger);
  }
});

// 触发AJAX时传递trigger参数
$('.ajax-trigger').on('click', function() {
  $.ajax({
    url: '/your-api-endpoint',
    trigger: this, // 绑定当前触发元素
    // 其他AJAX配置
    success: function(res) {
      // 处理响应
    }
  });
});

// 在ajaxSend事件中获取触发元素
$(document).on('ajaxSend', function(event, jqXHR, options) {
  const $trigger = jqXHR._triggerElement;
  if (!$trigger) return;

  // 同方法1的进度条创建与定位逻辑
  const $progressBar = $('<div id="progressBarElem">A moment, please wait...</div>')
    .progressbar({ value: false });

  const elemOffset = $trigger.offset();
  $progressBar.css({
    position: 'absolute',
    top: elemOffset.top + 'px',
    left: elemOffset.left + $trigger.outerWidth() + 10 + 'px',
    display: 'block',
    zIndex: 9999
  });

  $('body').append($progressBar);
});

// 清理逻辑不变
$(document).on('ajaxStop', function() {
  $('#progressBarElem').remove();
});

二、避免布局干扰的核心要点 #

• 给进度条设置position: absolute，使其脱离文档流，不会挤占其他元素空间；
• 将进度条添加到<body>而非触发元素的父容器，避免受父容器overflow、position等属性影响；
• 通过z-index确保进度条显示在所有内容上方，避免被遮挡。

补充：优化进度条样式 #

将内联样式移到CSS文件，提升可维护性：

#progressBarElem {
  padding: 4px 8px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

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