ｊｓでchangeイベントの使い方

Question

読み込み時にチェックを入れて、それをchangeで拾うにはどうしたらいいのでしょうか。

下記コードをご覧ください。

ページ読み込みしたときに value="neko" にチェックしておりますが、そのチェック状態の変化を
$(document).on("change","input", function(){}
で取得して、アラートを出そうとしています。

しかし on("change" では、この「読み込み時のチェック」を拾えないようで躓いています。

読み込み時以外なら拾えますが、、ページ読み込み時にされるチェックのアクションを拾ってアラートの関数に繋げるには、どのように書いたらよいでしょうか？

<div>
  <input class="box" name="input" value="neko" type="radio">
</div>
<div>
  <input class="box" name="input" value="inu" type="radio">
</div>

<script>
$(function() {
  // ➀ページ読み込みしたときにチェック状態を変える
  if ($(window).width() >= 100) {
    $('input[value="neko"]').prop('checked',true);
  }
  // ➁チェック状態が変わったらアラート
  $(document).on("change",".box", function(){		
    alert('チェックされました');
  });	
});
<script>

要は、読み込み時の➀によるチェックを、➁で拾いたいという感じです。

Answer 1

//$(document).on("change","input", function(){    
//                      ↓
  $(document).on("change input", function(){        
    alert('チェックされました');
  });

【.on() | jQuery API Documentation】
http://api.jquery.com/on/

Comments

[joyitingjoin]

そういうことではなかったのですが、inputがわかりにくかったですね。すみません変えておきました。

[kei344]

$('input[value="neko"]').prop('checked',true).trigger("change");

[joyitingjoin]

すみませんアラートは出ないようですが、何か勘違いしてますか僕？
https://jsfiddle.net/jby0q5n9/

[kei344]

$(document).on を先に書いてください。
https://jsfiddle.net/Lnze5478/

[joyitingjoin]

これは夜分にどうもありがとうございます。助かりました。しかしどういう理屈で先に書かなければいけないのでしょうか？

[kei344]

イベントを登録する前にイベントを拾えるわけが無いので。

[joyitingjoin]

ありがとうございます。