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

问题描述

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

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

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

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

到前端（有关文档，请参阅 here）。

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

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

但是如何触发 JS 中的 hx-get 元素的 #cart-count？

注意

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

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

请注意，问题也被问到了here

解决方法

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

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

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