Hyperscript无法定位DOM元素#alert-success的技术求助

我正尝试通过HTMX的HX-Trigger触发Hyperscript代码，实现会员更新成功后显示提示框10秒再隐藏的效果。当前log "memberships"能正常在控制台输出，但操作#alert-success元素时会报错#alert-success' is null，调整<script>标签在目标元素的上下位置也没用。

使用的Hyperscript代码 #

<script type="text/hyperscript">
            on membershipsChanged
              log "memberships"
              remove .hidden from #alert-success
              wait 10s
              add .hidden to #alert-success
            end
 </script>

目标HTML元素 #

<div
            id="alert-success"
            class="hidden p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
            role="alert"
          >
            <span class="font-medium">Memberships updated successfully</span>
</div>

解决办法 #

1. 检查DOM节点是否被HTMX替换 #

如果HTMX请求的响应内容覆盖了#alert-success所在的DOM区域，事件触发时该元素已经被移除，就会出现找不到的情况。

• 处理方式：确保#alert-success不在HTMX的目标替换范围内，或者在响应中重新渲染该元素并保留其ID。

2. 把Hyperscript直接绑定到目标元素上 #

全局脚本监听事件时可能存在上下文查找问题，直接将脚本绑定到元素本身可以避免这个问题：

<div
            id="alert-success"
            class="hidden p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
            role="alert"
            _="on membershipsChanged from window
              remove .hidden from me
              wait 10s
              add .hidden to me
            end"
          >
            <span class="font-medium">Memberships updated successfully</span>
</div>

这里用me指代当前元素，from window确保能接收到全局触发的membershipsChanged事件，无需全局查找元素。

3. 确保事件在DOM更新完成后触发 #

如果事件在#alert-success还没渲染完成时就触发，也会找不到元素。可以给HX-Trigger添加afterSettle修饰符，确保DOM更新完成后再触发事件：

<!-- 在HTMX请求的响应中添加触发标记 -->
<div hx-trigger="membershipsChanged afterSettle"></div>

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