HTMX加载交换内容后触发自定义事件实现跨标签UI更新的方法

方案1：自定义事件触发（符合你最初的实现思路） #

你原本的自定义事件方案完全可行，只要保证事件在标签1内容交换完成后触发即可，有两种实现方式：

前端侧触发 #

在标签1中发起POST请求的元素上，添加HTMX生命周期监听属性，内容交换完成后手动触发自定义事件：

<!-- 标签1内的提交元素示例 -->
<button 
  hx-post="/tab1/update"
  hx-target="#tab1-content"
  hx-on::after-swap="htmx.trigger('my-custom-event-when-tab-1-updates-the-special-place')"
>
  保存修改
</button>

标签2的配置保持你原本的设计即可：

<!-- 标签2的容器元素 -->
<div 
  id="tab2-content"
  hx-get="/tab2/refresh"
  hx-trigger="my-custom-event-when-tab-1-updates-the-special-place"
  hx-swap="innerHTML"
></div>

后端侧触发 #

不需要修改标签1的前端代码，处理标签1POST请求的后端接口返回响应时，加HX-Trigger响应头即可，HTMX会在完成标签1内容替换后自动全局触发该事件：
响应头示例：
HX-Trigger: "my-custom-event-when-tab-1-updates-the-special-place" #

方案2：更简便的带外更新（推荐） #

针对这类单操作触发多UI更新的场景，HTMX原生提供了hx-swap-oob（带外交换）特性，不需要编写任何事件相关代码，是最轻量化的实现：
你只需要让处理标签1POST请求的后端接口，返回的HTML内容里同时包含标签1和标签2的更新后内容，给标签2的内容根元素加上hx-swap-oob="true"属性，且id和页面上标签2的容器id完全一致即可，示例返回内容：

<!-- 标签1的更新内容，正常替换到页面对应容器 -->
<div id="tab1-content">
  标签1修改后的最新内容
</div>
<!-- 标签2的更新内容，加hx-swap-oob属性后HTMX会自动匹配页面上同id元素替换 -->
<div id="tab2-content" hx-swap-oob="true">
  标签2同步更新后的内容
</div>

这种方案前端不需要做任何额外配置，一次请求即可完成两个区域的更新，没有额外的网络请求开销，适配绝大多数关联UI更新场景。

内容的提问来源于stack exchange，提问作者Eldamir