htmxのリクエストトリガーに別の要素のイベントを指定する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、htmxのリクエストトリガーに別の要素のイベントを指定する方法をご紹介します。

htmxとは
実現したいこと
hx-triggerのfrom:*で別の要素のイベントをトリガーに指定できる
まとめ
参考文献

htmxとは

htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。

以下のように、マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。

<!-- クリックするとPOSTリクエストが発行される -->
<button
type="button"
hx-post="/sample"
hx-trigger="click"
hx-target="#target"
>
  送信
</button>

<!-- レスポンスのHTMLに置き換わる -->
<div id="target"></div>

実現したいこと

実現したいことを整理します。

htmxではリクエスト発行のトリガーはhx-trigger属性で指定します。

<!-- 自要素のクリックイベントがトリガーになる -->
<button hx-trigger="click" ...>
  送信
</button>

この例では、hx-triggerにclickと指定したため、自要素（= hx-post等のリクエスト用の属性を持つ要素）のクリックイベントがリクエストのトリガーとなります。

一方で今回実現したいのは、別の要素のクリックイベントをリクエストのトリガーとすることです。

<!-- #send-buttonのクリックでPOSTリクエストが発行されるようにしたい -->
<div hx-post="/sample" ...></div>

<button id="send-button" type="button">送信</button>

hx-triggerのfrom:*で別の要素のイベントをトリガーに指定できる

hx-triggerの修飾子の一つであるfrom:*を使用すると、別の要素のイベントをリクエストのトリガーに指定できます。

htmx.org

構文は以下の通りです。

hx-trigger="<Web API events> from:<Extended CSS selector>"

例えば、「別の要素である#send-buttonのクリックでPOSTリクエストが発行される」場合は次のようになります。

<!-- #send-buttonのクリックでPOSTリクエストが発行される -->
<div hx-trigger="click from:button[id='send-button']" hx-post="/sample" ...></div>

<button id="send-button" type="button">送信</button>