You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

HTMX动态更新hx-delete URL异常:改属性后仍用旧地址报错

问题解决:HTMX动态修改hx-delete属性后仍使用旧URL

问题根源:HTMX在页面初始化时会解析所有hx-*属性并将值缓存到内部状态中,后续通过Hyperscript修改元素的hx-delete属性,并不会自动更新HTMX的缓存,因此点击按钮时依然会调用初始的URL。

解决方案1:修改属性后让HTMX重新解析元素

在设置hx-delete属性后,调用HTMX的htmx.process()方法重新处理确认按钮,强制更新内部缓存:

<!-- 打开模态框并设置删除URL -->
<button
  _="on click 
     set @hx-delete of #confirm_delete_button to '{% url view_name record.pk %}'
     then call htmx.process(#confirm_delete_button)"
>
  打开删除确认框
</button>

<!-- 删除确认按钮 -->
<button
  id="confirm_delete_button"
  hx-delete="to_be_set_later_by_hyperscript"
  hx-trigger="click"
  hx-target="body"
  hx-swap="delete"
>
  删除
</button>

解决方案2:直接用Hyperscript发起DELETE请求

绕过hx-delete属性的缓存机制,在确认按钮的点击事件中直接用Hyperscript发起符合HTMX规范的请求:

<!-- 打开模态框按钮 -->
<button
  _="on click show #delete_modal"
>
  删除
</button>

<!-- 删除确认按钮 -->
<button
  id="confirm_delete_button"
  _="on click 
     fetch '{% url view_name record.pk %}' 
     method DELETE
     headers {
       'HX-Request': 'true',
       'HX-Target': 'body',
       'HX-Swap': 'delete'
     }
     then if response.ok
       remove closest .modal
       trigger htmx:refresh on body"
>
  删除
</button>

这种方式直接控制请求的所有参数,完全避免缓存问题,同时保留HTMX的交互行为(比如触发页面刷新)。

内容的提问来源于stack exchange,提问作者David Dahan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 10:36:25