一瞬はまってしまうことって・・・ありますよね？
例えば、こう書きます。
0001<input type="button" id="testbtn1" value="test1">
0002<script src="popup.js"></script>
0003<input type="button" id="testbtn2" value="test2">
popup.js0001$("#testbtn1").on("click", () => {
0002alert(′test1′);
0003});
0004$("#testbtn2").on("click", () => {
0005alert(′test2′);
0006});
test1 のボタンは alert を出しますが、test2 は alert を出しません。違いは、イベントを監視するモジュールの設定位置。
test1 は、イベント監視モジュールの読み込み前、test2は、イベント監視モジュールの読み込み後。
つまり、イベント監視の jQuery は、自身が読み込まれる前に設定してある「シンボル/ID」のイベントを監視するわけです。
したがって、イベント監視のモジュールが読み込まれ、そのモジュールがイベント監視用テーブルを作成した後に書かれた test2 は、イベント監視用モジュールのイベントテーブルには登録されていないことになります。
その結果、test1 は、反応するけど、test2 のボタンには反応しないということになります。
わかっていてもついうっかり見落としがちなバグ。気を付けましょう。
読み込んでからでないと動かない
例えば、Html を読み込んでから出ないと動かない Script。ところが最初の方に書いてしまうとなぜかエラーで止まってしまう。
私のように JavaScript を Ojt で勉強している人にありがちなこと。
JavaScriptのソース上での位置を変える。。。
それに長い時間を費やす。。。
そんな時、JavaScriptプログラマは、迷わず以下のコマンドを使います。
jQuery(window).ready(function(e){・・・} );
ウィンドウの準備ができたら・・・
つまり、サイトページのHTMLや画像がすべて読み込まれたら実行して頂戴。
それが、JQuery(window).ready( );
もう少し早い段階で起動する場合は、
jQuery(document).ready( );
を使います。
画像にいたずらしたいときは、まよわず window
html のform タグ、html そのものでいたずらしたいときは、 document 程度に覚えておくとよいかも。
この記事があなたの一助になれば幸いです。