jQuery 1.7の on()で要素を削除して追加後もイベントを永続的に引き継ぐ

jquery

先日、とある案件である要素にclickイベントを設定していたのですが、削除する必要性があったため削除するとclickイベント自体も削除されてしまうので、永続的にイベントを引き継ぐ必要性があったのでメモ。

まぁ、もともとは「live()」イベントや「delegate()」などもあるのですが、jquery1.7のバージョンから追加された機能で「on()」が推奨されるらしいので最新のバージョンでメモ。
今回追加された「.on()」「.off()」は「.bind()」「.live()」「.delegate()」のイベントをカバーしたイベントみたいらしいですが。
詳しい内容については「バシャログ：jQuery1.7のon()やoff()について調べてみた」や「GINPEN.COM:jQuery 1.7の更新内容をまとめたよ。」に書いてあります。
ちなみにlive()を削除するdie()やdelegate()を削除するundelegate()については書いていません。

liveイベントに代わるonイベント

そもそもliveイベントの説明を見ると「現在および将来的にも、セレクタにマッチする全ての要素に適用されます。」って書いてるし「ハンドラ登録時にマッチする要素だけでなく、永続的にイベント発生時点でマッチする要素に反応する点が異なります。」とも書いている。
これは、要は後に追加されるである要素がlive()かon()のイベントに登録されているセレクターにマッチすればイベントが反応すること。という認識。

//liveイベントでの書き方
 $("ul#list li").live("click",function() {
    var t = $(this).text();
    $("p#res").text(t + "がクリックされた");
});​

//onイベントでの書き方
$("ul#list").on("click","li",function() {
    var t = $(this).text();
    $("p#res").text(t + "がクリックされた");
});​

上記の例を見てもらうと分かると思うが、live()の場合はセレクターをjqueryオブジェクトで前に指定しているが、on()の場合はonイベントの引数にセレクターを設定しているのに違いがある。
下記はon()のサンプル。要素削除ボタンで要素を削除した後に要素追加ボタンで要素を追加したあともイベント+番号のクリックイベントが効いてるのがわかる。