HTMX定时刷新片段异常：偶尔重定向至目标URL而非嵌入页面

你可以通过给目标元素添加HTMX错误事件处理器，拦截请求失败时的默认跳转行为，实现静默忽略错误。

修改后的代码如下：

<ul hx-get="/refresh" hx-trigger="every 30s" id="today" hx-select="#today" hx-target="#today" hx-swap="outerHTML" hx-on::error="event.preventDefault()">

原理说明 #

当HTMX请求出现错误（比如网络中断、服务器返回5xx/4xx状态码）时，默认会触发浏览器跳转至请求URL的行为。通过hx-on::error="event.preventDefault()"可以阻止这个默认操作，让请求失败时保持当前页面状态，等待下一次定时刷新即可。

如果需要排查问题，还可以扩展事件处理逻辑，在控制台打印错误信息：

<ul hx-get="/refresh" hx-trigger="every 30s" id="today" hx-select="#today" hx-target="#today" hx-swap="outerHTML" hx-on::error="event.preventDefault(); console.log('刷新失败:', event.detail)">

内容的提问来源于stack exchange，提问作者Thomas Parslow