事件 - htmx:afterOnLoad

htmx:afterOnLoad 是 HTMX 的一个事件，在响应加载完成并更新 DOM 后触发。

它是页面中某个 hx-* 请求完成并完成“交换（swap）”操作（即内容已替换进 DOM）之后，触发的较晚阶段事件。

适合用来：

• 对新插入的 DOM 元素做处理（如绑定事件、初始化插件等）；

• 跟踪加载效果；

• 链式触发其他行为。

事件参数

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

示例：在内容加载后高亮新内容

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

<div id="result"></div>

<script>
  document.body.addEventListener("htmx:afterOnLoad", function (event) {
    const newContent = event.detail.target;

    // 添加临时高亮
    newContent.style.backgroundColor = "#ffffcc";

    // 2 秒后去掉高亮
    setTimeout(() => {
      newContent.style.backgroundColor = "";
    }, 2000);
  });
</script>

示例：自动滚动到新加载内容

document.body.addEventListener("htmx:afterOnLoad", function (event) {
  const el = event.detail.target;
  el.scrollIntoView({ behavior: "smooth" });
});

示例：动态绑定事件给新插入的按钮

document.body.addEventListener("htmx:afterOnLoad", function (event) {
  const newButtons = event.detail.target.querySelectorAll("button.alert");

  newButtons.forEach(btn => {
    btn.addEventListener("click", () => {
      alert("新加载按钮被点击！");
    });
  });
});