jQuery勉強:eachさせた中の$(this)でlive()は使えない
昨日、5509ブログのnoriさんとチャットで話をしている中で「nori: liveがうまくいかない><」なんて話がでてきたので、一緒にソースを見て、どうして動作しないのかを検証してみることにした。
自分以外の人のスクリプト
そんな「わからない、どうしよう…」なんてことがきっかけで、スクリプトを見てみることになった。
noriさんのスクリプトとか、毎回新しいエントリーがでるたびにみていたのですが、ざっと作りを把握するだけで、細部まで考えたことがなかった。しかし、細部までみていくことは、自分と違う作り方をするため、結構どういうつくりになっているかを理解するのに時間がかかる。でも、それが今とっても勉強になっていていい。こんな使い方もできるのかーとか、こんなコードでいいのか!!なんていう、自分一人ではわからな世界が見れてとてもいい。
読解に時間はかかるものの、説明してもらいながらとかだと、勉強にもなるし、時には「こうしたほうがいいんじゃ?」なんて意見交換もできたりする。お互いに刺激になるのでいいなーと思った。
そして、時間はっかってしまったが、なんとかnoriさんのスクリプトが理解でき、本題のliveの挙動について。
liveってthisで動作するの?
noriさんのスクリプトでは、eachのなかで$(this)で指定したものにliveを指定していた。スクリプトを見る限り、動いてもよさそうなスクリプト…でも動作していない。
そんな疑問をもったものだから、早速noriさんと実験!
とりあえず動作するliveのサンプル
■サンプルHTML
<p>クリック!ここがコピーされます。</p>
実際に二人で実験したのとは少し違いますが、こんなHTML
■サンプルスクリプト
$("p").live("click",function(){ $(this).after($(this).clone()); });
■サンプルデモ(動作します)
クリック!ここがコピーされます。
each中のlive
■サンプルスクリプト
$("p").each(function(){ $(this).live("click",function(){ $(this).after($(this).clone()); }); });
■サンプルデモ(動作しません)
クリック!ここがコピーされるはずだけど…
先ほどのスクリプトをeachの中に入れただけのスクリプト。動作しそうで動作しません。
thisのほかにも使えないのがある
thisの他にもnect()とか、複数セレクタ指定は動作しないようですね。
Live events currently only work when used against a selector. For example, this would work: $("li a").live(...) but this would not: $("a", someElement).live(...) and neither would this: $("a").parent().live(...).
Events/live - jQuery JavaScript Library
よくわかってませんが、ということだそうです。
勉強になりました
誰かと一緒に検証というか勉強するっていいですね。お互いの勉強にもなりますし、刺激にもなる!もっともっと時間があればもっといろいろな方とも勉強できたりするんですけどね。
noriさん、またぜひ共同で作業したり勉強しましょう!!