【Javascript】チェックボックスのonchangeでイベントが発動しないときの解決法【jQuery】

チェックボックスをクリックしてもイベントが発動しない！

jQueryを使用してチェックボックスへの操作をトリガーにイベントを発動させようとしたのだけれどどうしても動かずハマりました。

HTMLの例

<input type="checkbox" name="testbox" id="checkbox">

jQueryの例

$(function(){

    $('#checkbox').on('change', function(){
            window.alert('チェックされたよ！');
    });
    
});

このチェックボックスを押したときにアラートを表示させたいのだけれどどうしても出来ない。

以下解決策です。

jQueryで生成された要素をトリガーにイベントを発動させる方法

対象のHTML要素がjQueryによって動的に追加されたものである場合、上記の記述では発動しません。

記述を以下のように変更すれば発動しました。

※HTMLは先の例と同様ですので省略します。

jQueryの例

$(function(){

    $(document).on('change', '#checkbox', function(){
            window.alert('チェックされたよ！');
    });
    
});

これで無事イベントが発動しました。