HTMX 加载后触发自定义事件答案

【问题标题】：HTMX trigger custom event after loadHTMX 加载后触发自定义事件
【发布时间】：2022-01-07 02:39:57
【问题描述】：

想象一下一个选项卡式面板。我对 tab1 中的数据进行了一些更改，然后我使用 HTMX 在 tab1 中发布和交换内容。现在，tab1中可能有部分信息，当我更改它时，我还必须刷新tab2的内容。

我想用hx-trigger="my-custom-event-when-tab-1-updates-the-special-place" 设置tab2。都好。但现在我想通知 HTMX 在 tab1 的特定部分加载/交换后引发此事件。

我该怎么做？

或者在这些情况下是否有其他更容易实现的方法？

这基本上是在 UI 中处理副作用的问题。是的，你做了一件事，但现在其他的事情也需要发生。

【问题讨论】：

你是如何实现你的选项卡式面板的？如何从 tab1 切换到 tab2？
好问题。我想象在加载时渲染每个选项卡并使用引导程序的 css/is 实现。每当我单击以使其处于活动状态时，我都可以轻松地点击后端以刷新选项卡。那很容易。但我想更好地控制它的刷新时间，所以我可以让它尽可能地响应
“在加载时渲染每个选项卡”这是什么意思？客户端收到一个包含所有选项卡的 html 的 http 响应？
再想一想……您使用标签式显示是否重要？我认为这是一个普遍的问题“如何用 htmx 更新其他内容？”。这个问题在这里得到了回答：htmx.org/examples/update-other-content这有帮助吗？
htmx.org/examples/update-other-content/#events HX-Trigger 响应标头

标签： htmx

【解决方案1】：

最简单的方法是在您返回选项卡 1 的内容时触发事件服务器端。您可以在 htmx 文档中找到更多信息：https://htmx.org/headers/hx-trigger/

您需要更改 tab2 上的触发器以监听 my-custom-event-when-tab-1-updates-the-special-place from:body。

另一种方法是使用htmx:afterSwap 事件。为此，您需要监听 tab1 上的事件，然后手动触发 tab2 上的事件。

【讨论】：