ページを表示した後にイベントを発火したい

入力フォームを作成しました。

radioボタンにjQueryを使ってイベントを登録し
ページを読み込んだ後に動かそうとしています。

HTML
1<html lang="ja">
2    <head>
3        <meta charset="utf-8">
4	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5    </head>
6<body>
7    <input type="radio" name="mail" value="1" checked>メール１<br>
8    <input type="radio" name="mail" value="2">メール２
9    <script>
10    $(function(){
11        $('input[name=mail]').on('change',function(){
12            //途中でイベントを登録
13            alert('イベント実行');
14        });
15    });
16    </script>
17    <!--
18        その後あれこれとHTMLを記述して
19        ～
20        ～
21        ～
22    -->
23    <script>
24        //最後にイベントを発火させようとしている
25        $(window).on('load',function(){
26            alert('test');
27            $('input[name=mail]:checked').change();
28        });
29    </script>
30</body>
31</html>

このやり方だとradioボタンのイベントはどうにも動いてくれません。
ちなみにalert('test')は表示されるのでコードは動いていますしエラーにもなっていません。

悩んだ末にイベントを登録した直後だと動くことがわかりました。

HTML
1<html lang="ja">
2    <head>
3        <meta charset="utf-8">
4	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5    </head>
6<body>
7    <input type="radio" name="mail" value="1" checked>メール１<br>
8    <input type="radio" name="mail" value="2">メール２
9    <script>
10    $(function(){
11        $('input[name=mail]').on('change',function(){
12            //途中でイベントを登録
13            alert('イベント実行');
14        });
15        //ここだと動く
16        $('input[name=mail]:checked').change();
17    });
18    </script>
19</body>
20</html>

質問しようと試しているうちに解決してしまったのですが
最初の書き方だとなぜイベントが動かないのかわかりません。

同じ$(function)内に書かないとイベントが発火しないものでしょうか？

jqueryのバージョンはLaravelに同梱されていた3.2.1です。

x_x

2018/08/17 09:14

$(function(){...}と、$(window).on('load',function(){...}のfunctionはどちらが先に呼ばれているか確認しましたか？

x_x

2018/08/17 09:17

それと、提示コードではどちらにしてもcheckedがなくて動かないはずなので確認してください

msx2

2018/08/17 09:48

$(window).on('load')に書いたコードが一番最後に動くものだと思い込んでいましたが、そうとは限らないんですね。後で確認してみます。それとcheckedはフォームが送信で送られてくる想定なのでここでは書いてないです。初期表示でどちらも未選択なのもちょっと変ですけど…

think49

2018/08/18 04:55

x_x さんが指摘されているのは「$('input[name=mail]:checked').change(); は存在しない要素に対して .change() しているので、動かない」だと思いますが、伝わっていますか。このコードは順番に関係なく、動かないですよね。

msx2

2018/08/18 06:02

提示のコードは省略した上に投稿にあたって変更もしているので間違ってるかもしれません。質問の趣旨としては上と下のコードで記述場所によって動作が異なるのは何故か？というところで、セレクタの書き方がわからなくて困っているのではありません。不正確なコードに言葉足らずな質問で申し訳ありませんが、動くと仮定して見ていただければ幸いです。

think49

2018/08/18 09:56

動くコードを質問文に載せて下さい

msx2

2018/08/18 11:39

コードを書く場所による違いを質問したいので、記述場所を示すのが目的のコードが必ずしも動く必要はないような気がします。ありがたいことに拙い質問でも私の求める回答が得られ疑問を解消することができました。ただteratailの質問と回答は自分だけのためではなく、同じような問題に直面した人たちにとって有用なコンテンツになると考えますので、そういう意味で提示のコードが不適切であれば解決後であっても修正するのがサイトへの貢献ですね。今はパソコンが使えないので週明けにでも確認してみます。

think49

2018/08/18 12:22

検証しましたが、x_x さんが指摘された「提示コードではどちらにしてもcheckedがなくて動かないはずなので」が正しいようにしか思えません。

行動規範の内容に同意します

回答2件

ベストアンサー

簡潔に述べると、jQuery関数でラップした処理とそうでない処理の実行タイミングは異なるんです。
以下、検証コード。

javascript
1<input type="radio" name="mail" value="1" checked >メール１
2<input type="radio" name="mail" value="2">メール２
3<script>
4$(function(){
5    console.log('40')
6    $('input[name=mail]').on('change',function(){
7        //途中でイベントを登録して
8        console.log('100');
9        
10    });
11    console.log('50')
12//    $( function(){ $('input[name=mail]:checked').change(); });
13});
14</script>
15～
16～
17～
18//最後にイベントを発火させようとしている
19<script>
20	  console.log('10');
21//    $( function(){ $('input[name=mail]:checked').change(); });
22    $(window).on('load',function(){
23    		console.log('20');
24				$( function(){ console.log('10010'); $('input[name=mail]:checked').change(); });
25    });
26</script>

質問文の「うまくいかないコード」に若干の修正を加えています。
一番大きな違いは、イベントを発火させるコードをjQuery関数 $() でラップしていることです。

各処理の前後でコンソールに数字が出力されます。出力順を追ってみてください。
上側のイベント登録処理はonloadの処理が終わった後に実行されています。
(logは10,20,10010,40,50の順）
なので、onload時にイベント発火処理を書いても何も起こらないのです。イベント登録処理前にすでに発火しちゃってるから。
で、このイベント発火処理を$()でラップすると、ラップしたブロックがイベント登録処理の後に実行されていることがわかります。
(logは10,20,40,50,10010,100)

jquery内の詳しい挙動はさすがにわからないのですが、イベント発生順を内部でよしなに整理してくれているのかもしれません。そのあたりは有識者求ム。

なお、イベント登録部分とイベント発火部分の記載順を逆にしても、期待通りに動きます。

投稿2018/08/18 01:53

hope_mucci

総合スコア4447

msx2

2018/08/18 03:52

ご回答ありがとうございます！なんと、そういう事でしたか。イメージ的には上から順番にコードが実行されて最後にonloadのコードが実行されているものだとばかり… 検証いただいた感じだとラップされてないコードが動いてからラップされたコードが上から順に実行されているっぽいですねー。(必ずしもそうとは限りませんけど) そういう挙動だとわかれば書き方を変えればいいだけなので修正できそうです！また検証のやり方も分かりましたので自力で解決できることが増えそうです。わざわざ検証までしていただいて本当にありがとうございました！！

行動規範の内容に同意します

質問文のコード

質問文のコード - JSFiddle

悩んだ末にイベントを登録した直後だと動くことがわかりました。

いいえ。動きません。

質問文のコード(これだと動く -> No!No!No!) - JSFiddle

checked 属性

動かない理由は**$('input[name=mail]:checked')にマッチする要素ノードが存在しないから**です。
checked属性を付与すれば、期待通りに動きます。

checked属性を追加(修正版) - JSFiddle

提示のコードは省略した上に投稿にあたって変更もしているので間違ってるかもしれません。質問の趣旨としては上と下のコードで記述場所によって動作が異なるのは何故か？というところで、セレクタの書き方がわからなくて困っているのではありません。

「セレクタが正しい」と主張するのでしたら、因果関係を正しく認識して下さい。
セレクタが正しいと確信できるのは、「正しいセレクタ」に対応する「正しいHTML」を理解している場合に限ります。
この結果を見る限りですと、正しく理解しているようには読めません。

$()
.on('change')
.on('load')
.change()

これらがどこまで期待通りに動き、どこから期待通りに動作していない(理解しない動きをする)か、を正しく切り分けできていないのが原因です。

jQuery()

Re: msx2 さん

投稿2018/08/18 12:21

think49

総合スコア18162

msx2

2018/08/18 13:02

ご回答ありがとうございます。わざわざ検証までしていただきまして感謝します。なるほど、私の説明が足りていないことがよく分かりました。コードの目的や前提などをちゃんと書かず親切な人の時間を無駄に奪ってしまったことを深くお詫び申し上げます。このフォームはPHPのテンプレート用で、POST送信される前提で書きました。PHPで値を設定するのですが、そういう部分をすっぱり省略してしまったのが最大の過ちです。今回の質問だとcheckedをどちらかに入れておくのが適当ですね。後ほど訂正しておきます。この度は大変お世話になりました。質問する側としても質問のスキルを向上すべく精進します。