Changeイベントが実行されない理由について教えて頂きたいです

Question

jQuery 1.12.4　Firefox72 64bit

いつもお世話になります。
jQueryで以下のソースを書きました。

$(function(){
    $('#checkbox').change(function(){
        var bool = $(this).prop('checked');
        $('.child_checkbox').each(function(){
            $(this).prop('checked', bool);
        });
    });
    $('.child_checkbox').change(function(){
        console.log('Enter');
    });
});

見出しのチェックボックスの#checkboxを変更すると、テーブル内のチェックボックスの値が
変わるというやつですが、見出しの#checkboxを変更しても、'Enter'はログに表示されません。
（.child_checkboxのチェックは変更されます）

個別に.child_checkboxを変更すると、'Enter'はログに表示されます。

関数で変更した場合は、$('.child_checkbox')のイベントが実行されないのはなぜでしょうか？

ご存じの方がいらっしゃいましたらご教授お願いいたします。

Answer 1

changeイベントはユーザーのインタラクションで状態が変更されたときに発火します。

change イベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。

ref: https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event

jQueryで明示的にchangeイベントを発火されるには、以下のような書き方があります。

$(this).prop('checked', bool).change();

$(this).prop('checked', bool).trigger("change");

Comments

[mcncx]

ご丁寧な解説ありがとうございました！
明示的な発火条件や、解説のURLも感謝です。

ありがとうございました。解決しました。

Answer 2

関数で変更した場合は、$('.child_checkbox')のイベントが実行されないのはなぜでしょうか？

そういう仕様だからです。
ユーザー操作と関数での変更は別物ですので。

triggerで強制的にイベントを発火させる必要があります。

$(function(){
    $('#checkbox').change(function(){
        var bool = $(this).prop('checked');
        $('.child_checkbox').each(function(){
            $(this).prop('checked', bool).trigger('change');
        });
    });
    $('.child_checkbox').change(function(){
        console.log('Enter');
    });
});

あるいは、下記のようにクリックというユーザー操作を実行させれば、changeは発火します。

$(function(){
    $('#checkbox').change(function(){
        $('.child_checkbox').each(function(){
            $(this).click();
        });
    });
    $('.child_checkbox').change(function(){
        console.log('Enter');
    });
});

Comments

[mcncx]

こちらの回答見落としてました。すみません。
ご回答ありがとうございました。
解決済みとさせていただきました。

[hatena19]

いえ、サンプルコードをのろのろ書いていたので、投稿したときにはすでに解決済みになってました。