後から追加したエレメントにprettyPhotoを適用させたい
後から追加したエレメントにもjqueryを適用させたい場合は
live関数を使うんだけど、
prettyPhoto(Version: 2.5.2)は以下のように試行錯誤したら出来たのでメモ
まず、そのままライブ関数を適用させてみる
以下の様なソースを
$(function () { $("a[rel^='prettyPhoto']").prettyPhoto(); });
単純に以下に変えてみる
$(function () { $("a[rel^='prettyPhoto']").live("click",function() { $(this).prettyPhoto(); return false; }); });
しかしこれでは、2回クリックしないと窓は出てくれない
元々のものはロードされた時点、2つ目のはクリック時点で発動されているので
このままでは動かないのは、当然といえば当然か
そこで、元々のエレメントを「rel=prettyPhoto」、後から追加されるエレメントを「rel=prettyPhotoLive」に切り分ける
で、以下の様な形で用意されている関数openを使ってやる
$(function () { $("a[rel^='prettyPhoto']").prettyPhoto(); $("a[rel^='prettyPhotoLive']").live("click",function() { $.prettyPhoto.open($(this).attr("href"),$(this).attr("title")); return false; }); });
これで既存のprettyPhotoは正常に動き
追加されたエレメントprettyPhotoLiveもちゃんと動くようになりました