後から追加された要素へのイベント設定

 後から追加された要素へ普通にfunction設定しても動かない

JavaScriptによって後から追加された要素要素に対して、

$(セレクタ).on('click', function( ) { 処理 } )

としても動かない。

これは、ビューのローディング時には、その要素が存在しなかったため、イベントが設定できなかったからである。

どうすれば動くか

下記のように、.on( ) メソッドの第一引数にイベント名、第二引数にセレクタを記述すると動く。

$(document).on("click", "セレクタ", function( ) { 処理 } )

 この書き方では、click イベント自体はセレクタに対してではなく、document に対して設定されている。

なぜ動くようになるのか

on( ) メソッドの第二引数にセレクタを設定しているため、document 以下でセレクタをクリックした場合に実行されるイベントとなり、後から追加されたセレクタに対してもclick イベントが実行されるようになる。

つまり、ここではdocumentがクリックされたらイベントが発生している。指定したセレクタ以外をクリックしてもイベントが発生している。

ただ、発生元が指定したセレクタでないため、function は実行されない。

大体の場合、イベントを指定したいセレクタは、ある一定の範囲内にあるはずなので、出来るだけ狭い範囲で指定してあげたほうが、パフォーマンスの観点から見て望ましい。