事件 - htmx:targetError

htmx:targetError 是 HTMX 在无法定位 hx-target 指定的目标元素时触发的事件。

这是一次“目标元素定位失败”错误，即 HTMX 请求响应返回后，尝试插入内容时找不到页面中指定的 hx-target 元素（例如 id 写错了），就会触发 htmx:targetError 。

事件参数

• detail.elt - 触发请求的元素
• detail.target - 出现问题的的 CSS 选择器

与 htmx:swapError 的区别

事件名	说明
htmx:targetError	目标元素找不到（通常是选择器错误）
htmx:swapError	找到目标元素，但插入内容失败（如结构错误、浏览器限制）

示例代码

<script>
  document.body.addEventListener("htmx:targetError", function(evt) {
    console.error("目标元素未找到！");
    console.log("请求源元素：", evt.detail.elt);
    alert("页面插入失败，目标区域不存在！");
  });
</script>

错误示例

<!-- 错误：hx-target 指向不存在的 ID -->
<button 
  hx-get="/partial" 
  hx-target="#does-not-exist" 
  hx-swap="innerHTML">
  请求内容
</button>

正确示例

<div id="result">原始内容</div>

<button 
  hx-get="/partial" 
  hx-target="#result" 
  hx-swap="innerHTML">
  正确的请求
</button>