- 公開日
jQueryイベントデリゲーションを利用して遅延取得されるDOMにイベントをアタッチする
jQueryイベントデリゲーションをコードとともにおさらい。
No Event Delegation
デリゲーションしないパターン。何が問題なのか。
まずは「default item」をクリックする。「clicked!」になったね。「Add List」する。そいつをもう一度クリック。「clicked!」になってほしい。あれ、何も起こらないね？
See the Pen No `.on` selector by toshi (@toshimaru) on CodePen.
なぜならjQueryのセレクタ$("#list li")では、初期のDOMにしかイベントがアタッチされないから。後から追加されるDOMに対してはイベントアタッチはされない。
Use Event Delegation
イベントデリゲーションするバターン。こちらではどうでしょう？
まずは「default item」をクリックする。「clicked!」になったね。「Add List」する。そいつをもう一度クリック。「clicked!」になった。Add Listで追加されたDOMに対してもしっかりイベントが補足されるようになっている。
See the Pen Use `.on` selector by toshi (@toshimaru) on CodePen.
$("#list").onの第二引数としてセレクタ（li）を渡すことで、しっかり$("#list")のリスト要素全てにイベントがデリゲートされていますね。 