HTMX绑定的send-message事件监听器仅触发一次问题求助

我在DOM中添加了如下div，期望每次触发send-message事件时，它能向https://catfact.ninja/fact发送GET请求：

<div
    hx-get="https://catfact.ninja/fact" 
    hx-trigger="send-message from:document"
    hx-swap="none"
></div>

但实际情况是，该请求仅在元素加载后首次触发send-message事件时生效，后续触发事件均无法触发该div的HTMX事件监听器。

为验证事件确实被触发，我添加了如下控制台监听：

document.addEventListener("send-message", () => {
    console.log("send-message event emitted in document");
});

该监听每次都能正常打印日志，说明事件已正确触发。

最小可复现示例代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
</head>
<body>
    <script type="text/javascript">
        const sendMessageEvent = new Event("send-message");
        const handleKeypress = (event) => {
            if (event.key === "Enter") {
                event.preventDefault();
                document.dispatchEvent(sendMessageEvent)
            }
        };
        document.addEventListener("keypress", handleKeypress);
        document.addEventListener("send-message", () => {
            console.log("send-message event emitted in document");
        });
    </script>
    <div 
        hx-get="https://catfact.ninja/fact" 
        hx-trigger="send-message from:document"
        hx-swap="none"
    />
</body>
</html>

问题原因及解决方案 #

问题根源 #

JavaScript中，同一个Event实例只能被派发一次。当你第一次调用document.dispatchEvent(sendMessageEvent)后，该事件对象的内部状态会被标记为已完成，后续再尝试派发同一个实例时，浏览器会直接忽略这个操作。而HTMX的事件监听逻辑依赖于接收有效的、未被派发过的事件实例，因此出现仅首次响应的情况。

解决方案 #

每次触发事件时创建新的Event实例，不要复用同一个对象。修改后的代码如下：

const handleKeypress = (event) => {
    if (event.key === "Enter") {
        event.preventDefault();
        // 每次触发时创建新的事件实例
        const sendMessageEvent = new Event("send-message");
        document.dispatchEvent(sendMessageEvent)
    }
};

替换原代码中对应的部分后，HTMX的事件监听器就能每次响应send-message事件，正常发送请求了。

内容的提问来源于stack exchange，提问作者raphael-p