JavaScriptで追加した要素にクリックイベントが処理されない

いやー素晴らしい記事ですね。やっとAjaxを使って非同期でデータを取得できるようになったと思ったら、追加した要素にクリックイベントが反映されていないという「なんでやねん！」って一人でツッコミを入れてたけど、すぐに記事が出てきましたね。

イベントで追加された要素やAjaxローディングを使って読み込んだDOM要素に対して処理を実行する場合、意図した通りに動かない場合があります。
例えば、次のような「ボタンをクリックしてdiv要素を追加する」という記述（scriptの2〜4行目）をした場合、最初からあるdiv要素に対しては、「div要素をクリックしたら背景色をredにする」と言った処理（scriptの5〜7行目）は有効ですが、ボタンクリックで追加された要素に対しては反映しません。

これは素晴らしい！

\\ これだと後から追加されたdiv要素には反映されない
$("div").click(function() {
    $(this).css('background', 'red');
});

// これなら反映される！！
$(document).on('click', 'div', function() {
    $(this).css('background', 'red');
});

テーブルの情報をAjaxでロードした場合に、詳細画面へのリンクをdata-href属性を追加してリンク先へ

toDetailPageFromTableTr.js

// もともと
$('tr[data-href]').click( function(){
    window.location = $(this).attr('data-href');
});
// 変更後
$(document).on('click', 'tr', function(){
    window.location = $(this).attr('data-href');
});

そもそも

$(document).on('click', 'tr', function(){});

なんて書き方知らなかったし！まだまだ学ぶことだらけですな。