为什么我的 hx-trigger 没有使用 from: <css selector> 触发？

Question

我有一个按钮，我想在单击时向服务器发送两个请求。设置是这样的：

<button id="add-item" hx-get="some-url" hx-trigger="click" hx-target="#item-form" hx-swap="beforeend" type="button">Add item</button>

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

我尝试过使用

hx-trigger="click from: #add-item

，但这也不起作用。

add-item 发送的第一个请求是从服务器正确获取的，但来自 div 的第二个请求根本没有发送。当将 div 的触发器更改为

hx-trigger="click"

之类的内容时，它可以工作（还需要其中的一些内容才能单击）。

语法有问题吗？或者为什么这不起作用？

我已经像这样导入了 HTMX：

 <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>

如有任何帮助，我们将不胜感激。

Answer 1

您面临的问题可能与您使用

hx-trigger

属性的方式有关。 HTMX 的

hx-trigger

属性决定什么操作触发对服务器的请求。当您使用

hx-trigger="click from: #add-item"

时，它会尝试侦听来自 ID 为

add-item

的元素的单击事件。然而，似乎是 ID 为

add-item

的按钮触发了请求，而不是 div。

要在单击 ID 为

add-item

的按钮时发送两个请求，您可以按如下方式设置 HTMX 属性：

<button id="add-item" hx-get="some-url" hx-trigger="click" hx-target="#item-form" hx-swap="beforeend" hx-trigger-boost="true" type="button">Add item</button>

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

以下是更改内容：

1. 向两个元素添加了

   hx-trigger-boost="true"

   。这确保了 当触发事件传播到父元素（

   div

   ）时 单击按钮。
2. 将

   hx-trigger

   上的

   div

   更改为

   hx-trigger="click: #add-item"

   。这 意味着 div 将监听来自元素的点击事件 ID

   add-item

   .
3. 完成这些更改后，当您单击“添加项目”按钮时，它将 按预期触发两个请求。

Answer 2

这解决了问题：

hx-trigger="from: #add-item" 

替换为

hx-trigger="click from:#add-item" 

通过编写 click 来指定事件是必要的，并删除 from: 和 #add-item 之间的空格。