jQueryの「onメソッド」で指定したイベント(click、changeなど)に処理を設置したものの、効かない。
記述方法は間違っていなくても、バインドするタイミングによっては処理が正しく実行されない場合があります。
onメソッドの基本的な記述方法
$("#obj1").on("click", function(){ console.log("効かない!"); });
上記の記述は一切間違っていません。これでうまくいくパターンがほとんどです。
ただしコレだと、ページ読み込み後に生成された要素には効きません。
jQuery(js)で後から追加した要素などがそれに該当します。
引数にセレクタを指定するとうまくいく
$(document).on("click", "#obj1", function(){ console.log("効いた!"); });
これでイケます。
.on
する対象が、直接動作を実行する要素ではなく、親要素になっています。
ページ読み込み時には存在しなかった#obj1
に対して.on
してもそれ自体が無効となりますが、上記ではdocument
に.on
してるのでその処理は残ります。
後から追加された#obj1
も、document
に.on
した処理の条件にハマるということで、#obj1
クリックにて無事に処理実行されるイメージです。
この辺りはちょっとややこしやですね。
onに複数のイベントを紐づけたい場合は
半角スペースで区切れば、複数のイベントを設定可能です。
$(document).on("click change", "#obj1", function(){ console.log("複数に効いた!"); });
参考:
https://teratail.com/questions/61061
http://js.studio-kingdom.com/jquery/events/on