如何动态更新按钮的hx-get属性值？

问题场景 #

按钮定义在some_template.html：

<button @click="open = !open"
        id="btn_id"
        hx-get="/some_url/"
        hx-trigger="click"
        hx-swap="outerHTML">
</button>

在another_template.html中通过Alpine处理点击事件，尝试更新按钮的hx-get属性后触发点击，但请求仍使用初始URL：

document.addEventListener('alpine:init', () => {
    Alpine.data('dialog', () => ({
        handleButtonClick(id) {
            console.log(id);
            const button = document.getElementById('btn_id');
            const url = `/some_url/${id}`;
            button.setAttribute('hx-get', url);
            console.log(button.attributes); // 显示属性已更新
            button.click();
        }
    }));
});

原因分析 #

HTMX在元素初始化时会将hx-*属性的值存入内部缓存，后续触发请求时优先读取缓存值，直接通过setAttribute修改DOM属性不会同步更新这个缓存，导致请求还是用旧URL。

解决方案 #

方法1：使用HTMX官方API更新属性

用htmx.setAttribute()替代原生setAttribute，这个方法会同时更新DOM属性和HTMX内部缓存：

document.addEventListener('alpine:init', () => {
    Alpine.data('dialog', () => ({
        handleButtonClick(id) {
            const button = document.getElementById('btn_id');
            const url = `/some_url/${id}`;
            // 用HTMX API同步更新属性与缓存
            htmx.setAttribute(button, 'hx-get', url);
            button.click();
        }
    }));
});

方法2：直接触发HTMX请求（无需模拟点击）

调用htmx.trigger()触发按钮的HTMX事件，或者直接用htmx.ajax()发起请求：

// 方式A：触发HTMX的click事件
htmx.trigger(button, 'click');

// 方式B：直接发起AJAX请求
htmx.ajax('GET', url, {
    swap: 'outerHTML',
    target: button // 对应原hx-swap的目标
});

方法3：Alpine动态绑定属性（更优雅的结合方式）

在按钮上用Alpine的动态属性绑定，直接通过响应式数据控制hx-get，无需手动修改DOM：

<!-- 修改some_template.html中的按钮 -->
<button @click="open = !open"
        id="btn_id"
        :hx-get="`/some_url/${dialog.selectedId}`"
        hx-trigger="click"
        hx-swap="outerHTML">
</button>

// Alpine数据中维护selectedId
document.addEventListener('alpine:init', () => {
    Alpine.data('dialog', () => ({
        selectedId: null,
        handleButtonClick(id) {
            this.selectedId = id;
            // 直接触发按钮点击，此时hx-get已自动更新
            document.getElementById('btn_id').click();
        }
    }));
});

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