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

はじめに

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

改善前のソースコード

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

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

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

解決策

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

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