如何通过内联HTMX标签在Bootstrap5轮播项激活时触发Patch事件

希望在Bootstrap 5轮播中的项变为活跃项时，触发带有指定ID的HTMX Patch请求。已知通过额外脚本可以实现，但想了解是否仅使用HTMX标签就能完成。尝试过HTMX的revealed和intersect选项，但它们会在页面加载时同时触发。示例代码如下：

<div class="carousel-inner">
    <div id="6ec3f558-8526-4a3f-b70a-aeacf052805b"     
        hx-patch="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/"     
        hx-trigger="revealed"     
        hx-swap="none">         
        <a href="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/">         
            <div class="carousel-item active">         
            </div>     
        </a> 
    </div>   
    <div id="f2b061f3-3ccc-42aa-8217-c1194cdf4f00"     
        hx-patch="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/"     
        hx-trigger="revealed"     
        hx-swap="none">     
        <a href="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/">           
            <div class="carousel-item">         
            </div>       
        </a> 
    </div>
</div>

还尝试监听Bootstrap轮播事件，但未取得预期效果。请问HTMX文档中是否有遗漏的纯内联HTML标签解决方案？

• 首先明确：没有纯HTMX内联标签的实现方案。HTMX的内置触发事件（如revealed、intersect）都是基于元素可见性或DOM加载状态，无法直接监听Bootstrap轮播项的active类名变化。

• 最简洁的实现方式是结合Bootstrap的轮播事件，配合HTMX的自定义触发事件，仅需少量脚本：

1. 修改HTML，将hx-trigger改为自定义事件（比如customActive）：

<div class="carousel-inner">
    <div id="6ec3f558-8526-4a3f-b70a-aeacf052805b"     
        hx-patch="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/"     
        hx-trigger="customActive"     
        hx-swap="none">         
        <a href="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/">         
            <div class="carousel-item active">         
            </div>     
        </a> 
    </div>   
    <div id="f2b061f3-3ccc-42aa-8217-c1194cdf4f00"     
        hx-patch="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/"     
        hx-trigger="customActive"     
        hx-swap="none">     
        <a href="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/">           
            <div class="carousel-item">         
            </div>       
        </a> 
    </div>
</div>

2. 添加一段脚本监听Bootstrap轮播的切换完成事件，触发对应容器的HTMX请求：

// 监听轮播切换完成事件（slid.bs.carousel是Bootstrap官方事件）
document.querySelector('.carousel').addEventListener('slid.bs.carousel', function(e) {
  // 找到当前活跃轮播项的父容器（即带有hx-patch属性的div）
  const activeContainer = e.relatedTarget.closest('[hx-patch]');
  // 触发自定义事件，让HTMX执行Patch请求
  if (activeContainer) {
    activeContainer.dispatchEvent(new CustomEvent('customActive'));
  }
});

• 说明：这段脚本仅在轮播切换完成后，针对当前活跃的轮播项容器触发HTMX请求，完全符合需求，且代码量极少。

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