点击按钮时，HTMX的hx-trigger from选择器为何未触发请求？

问题原因 #

HTMX的from:触发器默认监听的是HTMX自定义事件（如htmx:afterRequest这类），而非原生click事件。你直接设置hx-trigger="from: #add-item"时，按钮点击只会触发原生click，不会自动向其他元素广播事件，因此div的请求不会被触发。

可行解决方案 #

方式1：通过自定义事件实现跨元素触发 #

修改按钮，在点击时广播自定义事件，让div监听该事件完成请求：

<button id="add-item" 
        hx-get="some-url" 
        hx-trigger="click" 
        hx-target="#item-form" 
        hx-swap="beforeend" 
        type="button"
        hx-on::after-request="htmx.trigger('#add-item', 'custom-add-click')">
  Add item
</button>

<br>
<div hx-get="some-other-url" 
     hx-trigger="custom-add-click from: #add-item" 
     hx-swap="beforeend">
</div>

如果不需要等待第一个请求完成，也可以直接在点击时触发自定义事件：

<button id="add-item" 
        hx-get="some-url" 
        hx-trigger="click" 
        hx-target="#item-form" 
        hx-swap="beforeend" 
        type="button"
        onclick="htmx.trigger(this, 'custom-add-click')">
  Add item
</button>

方式2：在按钮上手动触发第二个请求 #

直接通过hx-on::click调用HTMX的API发起第二个请求，无需额外div的触发器配置：

<button id="add-item" 
        hx-get="some-url" 
        hx-trigger="click" 
        hx-target="#item-form" 
        hx-swap="beforeend" 
        type="button"
        hx-on::click="htmx.ajax('GET', 'some-other-url', {target: this.nextElementSibling, swap: 'beforeend'})">
  Add item
</button>

<br>
<div>
</div>

原写法无效的核心原因 #

你尝试的hx-trigger="click from: #add-item"存在逻辑误区：from:的语法是[事件名] from: [选择器]，但HTMX不会自动将元素的原生事件广播给其他元素监听，只有自定义事件或HTMX内置事件，才能通过from:实现跨元素触发。

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