事件 - htmx:oobAfterSwap

htmx:oobAfterSwap 是 HTMX 在处理服务器响应中的 OOB（Out-of-Band）更新 并将其成功替换到页面后，针对每个 OOB 节点单独触发的事件。

如果服务器返回的 HTML 中包含 hx-oob="true" 的部分，HTMX 会在把这些内容插入页面后，对每个这样的节点触发一次 htmx:oobAfterSwap 事件。

事件参数

• detail.elt - 发送请求的元素
• detail.shouldSwap - 是否交换内容（默认为true）
• detail.target - 交换的目标
• detail.fragment - 响应片段

使用场景

HTMX 支持你从一次请求中「同时更新多个 DOM 元素」，其中某些元素可以用 hx-oob 标记，不受主 hx-target 限制。

对这些 hx-oob 元素更新完毕后，会触发此事件，让你有机会在插入 DOM 后绑定事件或做额外处理。

示例：使用 OOB 更新通知栏

客户端 HTML

<!-- 正常点击按钮触发 hx-get 请求 -->
<button hx-get="/load-data" hx-target="#main" hx-swap="innerHTML">加载内容</button>

<!-- 通知栏，OOB 更新目标 -->
<div id="notification-bar"></div>
<script>
document.body.addEventListener("htmx:oobAfterSwap", function (event) {
  const el = event.detail.target;
  console.log("OOB 元素已替换：", el);

  // 如果是通知栏，添加一个消失动画
  if (el.id === "notification-bar") {
    setTimeout(() => {
      el.style.transition = "opacity 1s";
      el.style.opacity = "0";
    }, 3000);
  }
});
</script>

服务端响应部分

<div id="main">
  <p>这是主内容区域更新。</p>
</div>

<!-- OOB 更新通知栏 -->
<div id="notification-bar" hx-oob="true">
  <strong>数据加载成功！</strong>
</div>