jQueryで追加した要素に対してクリックイベントが有効な書き方
jQuery の使い方の話です。
jQueryであとから追加した DOM（要素）は、通常の click イベントの書き方では対応出来ない事があるので、追加したあとの要素でもクリックイベントを利用できるようにする方法です。
jQuery で追加した要素に足してもクリックイベントを使う方法
一般的な click イベントの文
$("#click .box").on("click",function(){
//クリック時に実行する内容
});
最初の $(selector) のところには、対象にしたい要素をセレクタを使って指定します。あとはfunction {} 内に実行したいコードを書くだけ。
追加した要素に対しても実行したい click イベントの文
$("#click").on("click",".box",function(){
//クリック時に実行する内容
});
追加した要素にも click イベントを有効にしたい場合は 最初の $(selector) には、クリックイベントを実行したい要素の先祖を指定します。今回の例では #click が先祖で .box が子孫の関係にありますね、なので #click を指定しています。
そして on() 内の click の次には クリックイベントを実行したい要素をセレクタで指定します。
追加した要素に対してクリックイベントを有効にするには先祖・子孫関係が重要
$(先祖セレクタ).on("click","対象セレクタ",function(){
});
わかりやすいようにセレクタのところに文字をいれました、この先祖セレクタと対象セレクタが親子関係もしくは先祖子孫関係にある必要があります。
もしHTML側でbodyの直下にあるのなら、先祖はbodyにしてしまうと良いでしょう。
clickを指定しているのに動かないなと思った場合は紹介した記述の方法で大方可決するかとおもいます。
これは、clickイベントが書かれたコードとDOM追加を行ったコードとの位置関係が依存関係であったりします、DOMの追加されるタイミングよりも先に click イベントのコードが来てしまうと、クリックイベントが発生しない状態が起きてしまうようですので、最初から親子関係にしたクリックイベントの文にしてしまったほうが後のトラブル回避に良いかもしれませんね。
COMMENT