【jQuery】valやpropで変化させた際にchangeイベントを実行させる方法

2015/06/11 JavaScript/jQuery  このエントリーをはてなブックマークに追加
jQuery

input要素が変更された時に処理を実行するとして、

$('input[name=radio1]').change(function(){
    $('.radio_caption').html('値が'+$(this).val()+'になりました');
});


のように書いている人も多いと思います。自分もよく書きます。
さて、これが下記のようになった場合どうでしょうか?


// child_radioの値が変更されたら実行
$('input[name=child_radio]').change(function(){
    $('.radio_caption').html('値が'+$(this).val()+'になりました');
});

// 親ラジオボタンparent_radioが変更されたら、child_radioに値を引き継ぐ
$('input[name=parent_radio]').change(function(){
    $('input[name=child_radio][value='+$(this).val()+']').prop('checked','checked');
});



この場合、$('input[name=child_radio]').change();は実行されません。何でよ?値(選択)はpropで変わってるのに?と思うかもしれませんが、変わらないんです。この場合は下記のようにします。

// child_radioの値が変更されたら実行
$('input[name=child_radio]').change(function(){
    $('.radio_caption').html('値が'+$(this).val()+'になりました');
});

// 親ラジオボタンparent_radioが変更されたら、child_radioに値を引き継ぐ
$('input[name=parent_radio]').change(function(){
    $('input[name=child_radio][value='+$(this).val()+']').prop('checked','checked').trigger('change');
});


.trigger(event);はイベントのハンドラを呼び出し、実行します。
これで$('input[name=child_radio]').change();を動かすことができます。

そもそもpropで何でchangeが発火しないこと自体が微妙なところだと思うのですが、動かないものは動かないのですから、仕方ないのでtrigger()で呼びましょう。


trigger()で呼び出した$('input[name=child_radio]').change();に、
$('input[name=child_radio][value='+$(this).val()+']').prop('checked','checked')の変更値が反映されるようになったのはjQuery1.9からです。
1.9より前は、変更前の値が反映されます。


ここが変わっていたことを思い出せずに、作業が止まってしまったので、忘備録としてメモでした。

コメント

*
*

<< 【jQuery】valueを指定してラジオボタン(input:radio)を選択状態にする | プロダクションEXPOに行きました >>