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

大佬教程收集整理的这篇文章主要介绍了如何从 JavaScript 手动触发元素的 hx-get 事件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何从 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

解决方法

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

大佬总结

以上是大佬教程为你收集整理的如何从 JavaScript 手动触发元素的 hx-get 事件全部内容，希望文章能够帮你解决如何从 JavaScript 手动触发元素的 hx-get 事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。