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
相关产品推荐
相关产品推荐

