Hack Your Design!

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")のリスト要素全てにイベントがデリゲートされていますね。 :on:

参考

  • このエントリーをはてなブックマークに追加
comments powered by Disqus