如何为 HTMX 的不同触发器设置独立目标元素
htmx 不支持单个元素上为不同触发器（如 `keyup delay` 和 `change`）直接指定不同 `hx-target`，但可通过嵌套容器利用事件捕获与属性继承机制实现——外层容器响应 `change` 并更新 `#vendor_list`，内层容器响应 `keyup delay:500ms` 并更新 `#users_list`。
在 HTMX 中，hx-trigger 属性定义了何时发起请求，而 hx-target 指定了响应内容的插入位置。但 HTMX 的设计原则是：每个触发事件由最靠近事件源、且声明了对应 hx-trigger 的祖先元素处理，其 hx-target 优先级高于子元素。这意味着我们无法在同一个 上为不同触发条件分配不同目标——但可以巧妙利用 DOM 层级和属性继承来达成等效效果。
核心思路是：将 包裹在两层语义清晰的容器中，每层绑定一种触发器及对应的目标：
- 外层 响应 change 事件，指向 #vendor_list；
- 内层 响应 keyup delay:500ms，指向 #users_list；
- 本身不声明 hx-trigger 或 hx-target，仅作为事件源和表单控件存在。
✅ 正确实现示例（含 Django CSRF 安全适配）：
⚠️ 注意事项：
- 事件冒泡与捕获顺序：keyup 是冒泡事件，会先被内层 捕获；change 通常在失焦或选项确认后触发，由外层 处理。二者互不干扰。
- 避免重复请求：确保两个 hx-post 路由返回的内容结构与对应 hx-target 的预期一致（例如 #users_list 应接收
-
CSRF 安全性：Django 环境下务必通过 hx-headers 传递 X-CSRFToken，不可省略；若使用 hx-inclu
de 提交表单字段，也需确保 token 字段被包含。
- 性能提示：delay:500ms 可有效防抖，但需注意用户快速输入时可能取消前序请求（HTMX 默认自动取消未完成请求，行为可靠）。
通过这种嵌套策略，你无需编写 JavaScript 即可实现“一输入、双目标、多逻辑”的交互模式，既保持了 HTMX 的声明式简洁性，又满足了复杂 UI 的精准更新需求。
