事件 - htmx:afterSettle

htmx:afterSettle 是 HTMX 在执行完一次 请求插入（swap）动作之后，所有 DOM 更新和过渡动画完成后 触发的事件。

这是 HTMX 处理生命周期中的最后一步之一。你可以在这个事件中安全地操作最终状态的 DOM，比如：

• 启用按钮

• 停止 loading 动画

• 滚动页面

• 聚焦新插入的表单字段

事件参数

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

示例代码

<button 
  hx-get="/data" 
  hx-target="#result" 
  hx-swap="innerHTML">
  加载内容
</button>

<div id="result">这里是内容区域</div>

<script>
  document.body.addEventListener("htmx:afterSettle", function(evt) {
    console.log("DOM 插入与动画完全完成！");
    const el = evt.detail.elt;
    el.classList.add("fade-in-done");

    // 示例：滚动到新内容
    el.scrollIntoView({ behavior: "smooth" });
  });
</script>

使用场景

• 关闭 loading 状态
• 聚焦某个新输入框
• 插入后再初始化插件
• 滚动到新插入位置

和其它几个事件的对比

事件名	触发时机
htmx:afterSwap	内容插入后，动画/transition 可能还没结束
htmx:afterSettle	动画与 transition 都已完成，DOM 结构稳定
htmx:afterOnLoad	仅在响应中有 <script> 并执行完时触发
htmx:beforeSwap	可以拦截并修改插入的 HTML