[イベントデリゲーション] 遅延読み込み(Ajax)修正後に色々な箇所が動かなくなった

はじめに

リストデータを読み込む際に、時間がかかるということでUX改善のためリストデータの読み込みを遅延読み込み(Ajax)に修正したらJavaScriptで制御しているいろいろな箇所が動かなくなった。
改善前のソースコードはこんな感じ。

$(function() {
    $('任意のセレクター').click(function(e) {
        // 処理
    });
});

この任意のセレクターに修正した遅延読み込みのタグが指定されているのが原因だった。
画面読み込み後に確定する$('任意のセレクター')の、任意のセレクターがまだ存在していないからだ。順序的にはこんな感じなのでしょうか。

1. ドキュメントの読み込みが完了→$(function()
2. セレクタ―確定→$('任意のセレクタ―')
3. Ajaxリクエスト
4. 「任意のセレクタ―」を含むHTMLの描画

解決策

では解決策はどうすれば良いかというと。

$(function() {
    $(document).on('click', '任意のセレクター', function(e) {
        // 処理
    });
});

これだけ。セレクターそのものは一番の親要素であるdocumentに設定しその子要素の中で何をクリックするかを定義したら良い。
これをイベントデリゲーションというらしい。

実際には遅延読み込みに当たるタグの親要素なら何でも良いのでしょうが、まあこれに関してはdocumentでいいのかなと。
このてきとうさがまた思わぬ不具合を招くのですが。。。
その時はまたその時に解決しようかなと。