事件 - htmx:swapError

htmx:swapError 是一个 HTMX 的错误事件，在响应内容无法被插入页面时触发。

这通常发生于：

• 目标元素（hx-target）不存在

• 插入内容的方式（hx-swap）不支持当前目标元素

• 响应中有语法错误或不兼容结构

• 插入失败时触发的是 swapError，而不是 request error

事件参数

• detail.xhr - XMLHttpRequest
• detail.elt - 触发请求的元素
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置

触发场景示例

<!-- 这个按钮的目标元素是不存在的元素 -->
<button 
  hx-get="/partial"
  hx-target="#does-not-exist"
  hx-swap="innerHTML">
  请求内容
</button>

如果服务器返回：<div>新的内容</div>，但页面里没有 ID 为 #does-not-exist 的元素，那么 HTMX 就无法完成 swap 操作，就会触发该事件。

常见的发生原因

场景	说明
元素 ID 写错	常见错误，导致无法插入
插入 <tr> 到 <ul>	HTML 结构不合法，也可能失败
hx-swap="outerHTML" 把自己删了	下次操作无效
动态移除目标元素后又触发请求	会触发 swapError