事件 - htmx:afterSwap

htmx:afterSwap 是 HTMX 请求生命周期中的一个关键事件，在响应内容被插入（swap）到页面之后立即触发。

也就是说，DOM 已经更新，但动画、过渡等还可能正在进行。比 htmx:afterSettle 更早触发。

事件参数

• detail.elt - 发送请求的元素
• detail.xhr - 这XMLHttpRequest
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置

示例代码

<script>
  document.body.addEventListener("htmx:afterSwap", function(evt) {
    console.log("内容已插入页面！");

    // evt.detail.elt 是目标元素
    const target = evt.detail.elt;

    // 示例：插入后聚焦第一个 input
    const input = target.querySelector("input");
    if (input) input.focus();
  });
</script>

常见用途

用途	描述
初始化新插入的内容	比如绑定事件、添加样式等
插入后立即聚焦某元素	表单、弹窗常用
发送事件日志	可用于追踪内容更新点