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

我在用htmx https://htmx.org/向我的页面添加一些 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"

到前端（参见here https://htmx.org/headers/x-hx-trigger/对于文档）。

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

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

但我怎样才能触发hx-get of the #cart-countJS 中的元素？

注意

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

会工作 https://github.com/bigskysoftware/htmx/issues/187如果购物车的东西在父链中add-to-cart元素，但不幸的是我的网页并非如此。

注意，这个问题也被问到了here https://github.com/bigskysoftware/htmx/issues/339

您可以使用以下命令在最新版本的 htmx 中监听文档正文的事件from:像这样的修饰符：

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

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