方法 - htmx.onLoad()

htmx:load 事件在 HTMX 插入新的内容到页面并完成后触发。

也就是说，每当 HTMX 通过请求获取了新内容并将其插入到 DOM 后，htmx:load 会触发。

它类似于普通的 DOMContentLoaded，但针对 HTMX 动态加载的部分。

参数

• callback(elt) - 调用新加载内容的回调

event.detail 主要属性：

• target：新插入内容的父容器元素
• xhr：关联的 XMLHttpRequest 对象
• detail：事件详情

示例:给动态插入内容绑定事件

<div id="container"></div>
<button hx-get="/fragment" hx-target="#container" hx-swap="innerHTML">
  加载内容
</button>

<script>
  document.body.addEventListener("htmx:load", function(event) {
    const container = event.detail.target;
    console.log("htmx:load 触发，插入内容的容器:", container);

    // 假设新内容中有 class="clickable" 元素，绑定事件
    container.querySelectorAll(".clickable").forEach(el => {
      el.addEventListener("click", () => alert("动态元素被点击！"));
    });
  });
</script>