我正在使用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>
Run Code Online (Sandbox Code Playgroud)
我还有一个add-to-cart按钮,在它自己的东西之后(例如将其自身更改为remove from cart使用 htmx),发送一个额外的属性
response['HX-Trigger-After-Swap'] = "cart-updated"
Run Code Online (Sandbox Code Playgroud)
到前端(请参阅此处的文档)。
我有一个有效的事件侦听器,
document.body.addEventListener("cart-updated",
function (evt) {
alert("cart updated")
})
Run Code Online (Sandbox Code Playgroud)
但是我怎样才能触发JS中的元素呢hx-get?#cart-count
注意
hx-trigger="load delay:1s, cart-updated"
Run Code Online (Sandbox Code Playgroud)
如果购物车内容位于元素的父链中,则可以工作add-to-cart,但不幸的是,我的网页并非如此。
请注意,这里也提出了这个问题