用途
- jsで後から追加した要素にfunctionを効かせたい時に使う。
- ページの読み込みが終わった後に作られた要素に対して、functionを効かせたいときに使う。
- jsでfunctionが効かない時に試してみる。
使用方法
効く書き方
$(.hoge1).on("click", ".hoge2", function(){
// クリックした際の処理を書く
});
hoge1クラスがhoge2クラスの親要素。
hoge2クラスはページ読み込み後にjsで追加された要素。
このコードが効く理由
親要素である「hoge1クラス」はページ読み込みの際には存在していて、後から追加した「hoge2」クラスも「hoge1クラス」に on をしたことに含まれているから、このような形で効くようになる。
効かない書き方
$(.hoge2).on("click", function(){
// クリックした際の処理を書く
});
上記のコードが効かなかった理由
ページ読み込みの際には「hoge2クラス」は存在しておらず、その要素に対して on をしていたから。
※一般的なhtmlに対しては効く。jsで後から追加した要素には効かない。
下記のサイトを参考に執筆しました。