HTMX hx:afterRequest事件未触发问题排查求助

你的核心问题出在事件绑定的方式上：

当你写document.body.addEventListener('htmx:afterRequest', updateConnections())时，updateConnections()会立即执行（这就是页面初始加载时控制台会打印一次的原因），而非把函数本身作为事件处理程序传递给addEventListener。这就导致HTMX请求完成时，没有对应的处理函数被调用。

另外你的代码存在一个语法错误：$(document).ready的回调函数末尾缺少闭合的)，会导致JS解析失败（你提到其他JS功能正常，可能实际代码已修正，但仍需注意这类细节）。

修正后的代码 #

$(document).ready(() => {
    var hxCounter = 1

    function updateConnections() {
        console.log(`Reasigning the js references(${hxCounter})`)
        hxCounter += 1
    }
    // 去掉updateConnections后的括号，传递函数引用而非执行结果
    document.body.addEventListener('htmx:afterRequest', updateConnections)
}) // 补上此处的闭合括号

关键说明 #

• addEventListener的第二个参数需要是函数引用，而非函数执行的结果。加括号会立即执行函数，若返回值不是函数，事件触发时就没有可执行的代码。
• 你的JS代码位于基础模板的静态文件中，不会被HTMX请求替换，修正绑定方式后，每次HTMX请求完成时，htmx:afterRequest事件都会触发updateConnections函数，重新分配元素引用。

内容的提问来源于stack exchange，提问作者Erik Koinberg