後から追加したエレメントに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もちゃんと動くようになりました