Fatal编程技术网
  • javascript/
  • 如何从JavaScript手动触发元素的hx get事件

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

javascript

如何从JavaScript手动触发元素的hx get事件,javascript,htmx,Javascript,Htmx,我正在使用添加一些AJAX调用到我的页面。我有一个cart count元素，用于在加载页面后1s内检索购物车中的物品数量： <span id="cart-count" hx-get="/cart/count" hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML"> </span>

我正在使用添加一些AJAX调用到我的页面。我有一个
cart count
元素，用于在加载页面后1s内检索购物车中的物品数量：

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML">
</span>
到前端（有关文档，请参见）

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

document.body.addEventListener("cart-updated",
    function (evt) {
        alert("cart updated")
    })
但是如何触发JS中的
购物车计数
元素的
hx-get

注意


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


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


请注意，问题也会被问到
您可以使用
from:
修饰符在最新版本的htmx中收听文档正文上的事件，如下所示：


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







还请注意，此处不需要使用显式目标，因为默认目标是定义
hx get
的元素。
您可以使用
from:
修饰符在最新版本的htmx中侦听文档正文上的事件，如下所示：


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






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