[雑記] HerokuでjQueryのreadyイベントが動かなかった時にやったこと

チェックボックスのクリックをトリガーとするreadyイベントを作りたかったんです。
そこで、こんなreadyイベント関数を書きました。

// readyイベント関数
$(window).on("load", function(){

    // checkboxイベントの設定
    $('input[type="checkbox"]').change(function() {
        //
        // ここにはイベントの内容を書きます
        //
    });

});

ローカルでの動作確認ができたので、公開のためにこのコードを含めたファイルをHerokuにデプロイしたんです。

しかし、readyイベントだけ動作せず。
即時関数としては機能したのですが、readyイベント関数としては機能しませんでした。

一体なぜ...。
調査をすること××時間。
こんなブログ記事に出会いました。
▶︎ jQueryが動かない時に確認する9項目

そして、「2）処理のタイミングを確認」を参考に、以下の部分を...

// checkboxイベントの設定
$('input[type="checkbox"]').change(function() {

こう変えました。

// checkboxイベントの設定
$(document).on('change', 'input[type="checkbox"]', function() {

これで動きました...。
readyイベント関数を作る際には、on()を使うのが有効らしいです。

付録：実際に作ったコード

checkboxEvent.js

// readyイベント関数
$(window).on("load", function(){

    // checkboxイベントの設定
    $(document).on('change', 'input[type="checkbox"]', function() {
        var selectedCheckbox = document.getElementById($(this).val());
        if ($(this).prop('checked')) {
            selectedCheckbox.style.opacity = 1;
        } else {
            selectedCheckbox.style.opacity = 0;
        }
    });

});