【jQuery】あとづけする要素に .on() する方法

今日サーバーサイドエンジニアにjQueryの相談をされて調べ物をしていたら面白い書き方を見つけたので共有しますね。

append したものにクリック判定を当てたい場合ってよくありますよね。
今日はこんなケースを見てみましょう。

<div id=”parent”> が置かれていて、2秒待つと #parent の中に <div id=”child”> がアペンドされる。#child をクリックするとアラートが出る。

早速悪い例から。

See the Pen BKNbyb by Takaki Hiemno (@takaki1216) on CodePen.
↑jsを見てみてください。

$('#child').on();

このときにまだ <div id=”child” /> のDOMが生成されていないので、 .on() が bind されないんですね。
で、次のが今日知った書き方。

See the Pen LNVaxQ by Takaki Hiemno (@takaki1216) on CodePen.

$('#parent').on('click', '#child', function() {
alert('You touched me!');
});

これね。1.7から採用されたっぽいですね。
詳しくはここ読んでね。event-delegation って言うのかな？イベントの委譲？
api.jquery.com/on/