動的生成された要素に確実にバインドする

onメソッドを再確認

動的に生成された要素にイベントをバインドするには、現行のjQueryではon/offを用います。

ところが、頻繁に生成・削除が繰り返されるような要素であったり、Ajaxによって生成にタイムラグが発生する要素の場合、うまくバインドできないときがあります。

うまくバインドできないとは、イベントに紐づけた処理が適切に実行されないということです。

クリックしたら、アラートを出力するボタンを想定します。

$('button').on('click',function(){
    alert('HELLO');
});

ところがこのbutton要素が頻繁に生成・削除を繰り返したり、Ajaxによって生成にタイムラグが発生する場合、クリックしても無反応なときがあります。

onメソッドは、live（動的に生成された要素にイベントをバインドする関数）の役割も包含しているのですが、書き方によっては限界があります。

実はonメソッドには別の書き方もあり、上記のコードは次のように書き換えられます。

$(document).on('click','button',function(){
    alert('HELLO');
});

onメソッドには第二引数に、セレクタを指定することができます。

上記の例を用いると、documentに含まれているbutton要素に処理を紐づけるという意味です。

こうすることで、動的生成された要素にも確実に、処理を紐づけることができます。

onメソッドには他にも、イベントに名前空間をつけたり、カスタムデータを紐づけることもできるので、調べてみると可能性が広がります。