jQuery delegate() メソッドは、動的に追加される要素にイベントハンドラをバインドする際に使用されます。
動的に追加された要素にイベントバインディングを行うjQueryのdelegate()メソッドを使用します。
通常、on()メソッドで要素にイベントをバインドできますが、要素が動的に追加された場合は、ページ読み込み後に追加される要素、つまりバインド時に存在しない要素に直接on()メソッドでイベントをバインドすることはできません。
このdelegate()メソッドはこの問題を解決するために用意されました。これを使用すると委任によって既存の要素(通常はそれらの親要素)にイベントをバインドでき、イベントが発生した際に、セレクタを使用してイベントの発生源となる要素がターゲット要素かどうか判断します。ターゲット要素であれば、バインドされたイベント処理関数が実行されます。
delegate()メソッドの構文は次のとおりです。
$(selector).delegate(childSelector, event, data, handler);
そのうち:
- selector:イベントをバインドする親要素のセレクタ。
- childSelector:イベントをバインドする子要素のセレクタ。具体的な要素タグ名、クラス名、ID名などが利用できます。
- イベント: バインドしたいイベントのタイプ、「クリック」や「マウスオーバー」など。
- データ: イベントハンドラ関数に渡される追加のデータ(オプションパラメタ)
- ハンドラ:イベント処理関数。
なおdelegate()メソッドはjQuery3.0以降非推奨となり、on()メソッドの使用が推奨されています。そのためjQuery3.0以降を使用している場合は、delegate()メソッドの代わりにon()メソッドの使用を検討してください。