事件 - htmx:load

当新的 Dom 通过 htmx 加载到页面时发生该事件。

值得注意的是，在页面全局监听该事件时，页面首次加载也会触发该事件。如果 hx-get 等请求返回的内容不包含任何 html 的标签（即不含 Dom）则该事件不会被触发。

事件参数

detail.elt - 新添加的元素

示例代码

<body>
    <button onclick="fetchData()">Test1</button>
    <button hx-get="/test" hx-target="body">Test2</button>
    <button hx-get="/test/dom" hx-target="body">Test3</button>
</body>
<script>
    function fetchData() {
        fetch('/test')
            .then(response => response.text())
            .then(data => {
                console.log(data);
                alert(data);
            })
            .catch(error => console.error('Error:', error));
    }
    document.body.addEventListener('htmx:load', function(event) {
        console.log('HTMX content loaded:', event.detail.elt);
    });
</script>

以上示例代码中，点击 Test1 按钮时，htmx:load 事件不会被触发；同样地，点击 Test2 事件时，因为 /test 路径返回的是一个纯文本字符串，htmx:load 事件也不会被触发；只有点击 Test3 按钮时，因为 /test/dom 路径返回的内容是 <div>Hello, Get test with DOM!</div>，会在页面上添加一个 div ，所以 htmx:load 事件会被触发，在浏览器控制台打印出 HTMX content loaded 的文本。