如何从 JavaScript 手动触发元素的 hx-get 事件

Question

我正在使用htmx向我的页面添加一些 AJAX 调用。我有一个cart-count元素，定义为在页面加载后 1 秒内检索购物车中的商品数量：

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML">
</span>

我还有一个add-to-cart按钮，在它自己的东西之后（例如将其自身更改为remove from cart使用 htmx），发送一个额外的属性

    response['HX-Trigger-After-Swap'] = "cart-updated"

到前端（请参阅此处的文档）。

我有一个有效的事件侦听器，

document.body.addEventListener("cart-updated",
    function (evt) {
        alert("cart updated")
    })

但是我怎样才能触发JS中的元素呢hx-get？#cart-count

注意

hx-trigger="load delay:1s, cart-updated"

如果购物车内容位于元素的父链中，则可以工作add-to-cart，但不幸的是，我的网页并非如此。

请注意，这里也提出了这个问题

Answer 1

您可以使用修饰符在最新版本的 htmx 中侦听文档正文上的事件，from:如下所示：

<span hx-get="/cart/count"
      hx-trigger="load delay:1s, cart-updated from:body" 
      hx-swap="outerHTML">
</span>

另请注意，您不需要在此处使用显式目标，因为默认目标是hx-get定义的元素。