jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。
一瞬はまってしまうことって・・・ありますよね？

例えば、こう書きます。

	<input type="button" id="testbtn1" value="test1">
	<script src="popup.js"></script>
	<input type="button" id="testbtn2" value="test2">

popup.js

$("#testbtn1").on("click", () => {
	alert('test1');
});
$("#testbtn2").on("click", () => {
	alert('test2');
});

test1 のボタンは alert を出しますが、test2 は alert を出しません。

違いは、イベントを監視するモジュールの設定位置。
test1 は、イベント監視モジュールの読み込み前、test2は、イベント監視モジュールの読み込み後。

つまり、イベント監視の jQuery は、自身が読み込まれる前に設定してある「シンボル/ID」のイベントを監視するわけです。

したがって、イベント監視のモジュールが読み込まれ、そのモジュールがイベント監視用テーブルを作成した後に書かれた test2 は、イベント監視用モジュールのイベントテーブルには登録されていないことになります。

その結果、test1 は、反応するけど、test2 のボタンには反応しないということになります。

わかっていてもついうっかり見落としがちなバグ。気を付けましょう。