jQuery Photo Gallery ไม่ทำงานกับ element ที่สร้างแบบ on the fly

	$.getJSON('movies.txt', function(data) {
		var output="<ul>";
		for (var i in data.movies) {
			output += "<li class='portfolio-item' data-id='id-" + data.movies[i].id + "' data-type='cat-item-" + data.movies[i].category + "'>";
			output += "<div>";
			output += "<span class='image-block'>";
			output += "<a class='image-zoom' href='" + data.movies[i].imgbig + "' rel='prettyPhoto[gallery]' title='" + data.movies[i].title + "'>";
			output += "<img width='225' height='140' src='" + data.movies[i].thumbs + "' alt='" + data.movies[i].title + "' title='" + data.movies[i].title + "' /></a>";
			output += "</span>";
			output += "<div class='home-portfolio-text'>";
			output += "<h2 class='post-title-portfolio'><a href='" + data.movies[i].url + "' rel='prettyPhoto[ajax]' title='" + data.movies[i].title + "'>" + data.movies[i].title + "</a></h2>";
			output += "<p class='post-subtitle-portfolio'>released: 2008</p>";
			output += "</div>";
			output += "</div>";
			output += "</li>";
		}
		output+="</ul>";
		console.log(output);
		//document.getElementById("placeholder").innerHTML=output;
		//$('#placeholder').append(output);
		$('#placeholder').html(output);
	});	

{"movies":[
{"id":"0","category":"4","imgbig":"images/big/pic1.jpg","thumbs":"images/thumbs/p1.jpg","released":"2008","title":"Wall-E","url":"xhr_response.html?ajax=true&width=640&height=480&id=0"},
{"id":"1","category":"2","imgbig":"images/big/pic2.jpg","thumbs":"images/thumbs/p2.jpg","released":"2009","title":"Up","url":"xhr_response.html?ajax=true&width=640&height=480&id=1"},
{"id":"2","category":"1","imgbig":"images/big/pic3.jpg","thumbs":"images/thumbs/p3.jpg","released":"2011","title":"Cars 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=2"},
{"id":"3","category":"4","imgbig":"images/big/pic4.jpg","thumbs":"images/thumbs/p4.jpg","released":"2010","title":"Toy Story 3","url":"xhr_response.html?ajax=true&width=640&height=480&id=3"},
{"id":"4","category":"3","imgbig":"images/big/pic5.jpg","thumbs":"images/thumbs/p5.jpg","released":"2003","title":"Finding Nemo","url":"xhr_response.html?ajax=true&width=640&height=480&id=4"},
{"id":"5","category":"2","imgbig":"images/big/pic6.jpg","thumbs":"images/thumbs/p6.jpg","released":"2012","title":"Lorax","url":"xhr_response.html?ajax=true&width=640&height=480&id=5"},
{"id":"6","category":"1","imgbig":"images/big/pic7.jpg","thumbs":"images/thumbs/p7.jpg","released":"2011","title":"Happy Feet 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=6"},
{"id":"7","category":"1","imgbig":"images/big/pic8.jpg","thumbs":"images/thumbs/p8.jpg","released":"2010","title":"Tangled","url":"xhr_response.html?ajax=true&width=640&height=480&id=7"},
{"id":"8","category":"1","imgbig":"images/big/pic9.jpg","thumbs":"images/thumbs/p9.jpg","released":"2011","title":"Kung Fu Panda 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=8"},
{"id":"9","category":"2","imgbig":"images/big/pic10.jpg","thumbs":"images/thumbs/p10.jpg","released":"2012","title":"Madagascar 3","url":"xhr_response.html?ajax=true&width=640&height=480&id=9"},
{"id":"10","category":"3","imgbig":"images/big/pic11.jpg","thumbs":"images/thumbs/p11.jpg","released":"2011","title":"Rango","url":"xhr_response.html?ajax=true&width=640&height=480&id=10"},
{"id":"11","category":"4","imgbig":"images/big/pic12.jpg","thumbs":"images/thumbs/p12.jpg","released":"2010","title":"Shrek Forever After","url":"xhr_response.html?ajax=true&width=640&height=480&id=11"}
]}

jQuery.noConflict();
jQuery(document).ready(function($){
							
	function lightboxPhoto() {
		
		jQuery("a[rel^='prettyPhoto']").prettyPhoto({
				animationSpeed:'fast',
				slideshow:5000,
				theme:'light_rounded',
				show_title:false,
				overlay_gallery: false,
				social_tools: false
			});
		
		}
		
			if(jQuery().prettyPhoto) {
		
			lightboxPhoto(); 
				
		}
		
		
	if (jQuery().quicksand) {

		// Clone applications to get a second collection
		var $data = $(".portfolio-area").clone();
		
		//NOTE: Only filter on the main portfolio page, not on the subcategory pages
		$('.portfolio-categ li').click(function(e) {
			$(".filter li").removeClass("active");	
			// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
			var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
			
			if (filterClass == 'all') {
				var $filteredData = $data.find('.portfolio-item2');
			} else {
				var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
			}
			$(".portfolio-area").quicksand($filteredData, {
				duration: 600,
				adjustHeight: 'auto',
				adjustWidth: false
			}, function () {
					lightboxPhoto();
							});		
			$(this).addClass("active"); 			
			return false;
		});
		
	}//if quicksand

});

<html>
<head>
	<title>Tutorial - jQuery Photo Gallery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.quicksand.js" ></script>
	<script type="text/javascript" src="jquery.easing.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="jquery.prettyPhoto.js"></script> 
	<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
	<link href="prettyPhoto.css" rel="stylesheet" type="text/css" />    
</head>
<body>
<div class="wrapper" style="width:980px;">
   	<div class="portfolio-content" style="width:980px;">	
		<ul class="portfolio-categ filter">
			<li>categories:</li>
			<li class="all active"><a href="#">All</a></li>
         	<li class="cat-item-1"><a href="#" title="Category 1">Category 1</a></li>
			<li class="cat-item-2"><a href="#" title="Category 2">Category 2</a></li>
			<li class="cat-item-3"><a href="#" title="Category 3">Category 3</a></li>
			<li class="cat-item-4"><a href="#" title="Category 4">Category 4</a></li>
        </ul>
        
        <ul id="placeholder" class="portfolio-area" style="width:980px;">
			
			<div class="column-clear"></div>
		</ul><!--end portfolio-area -->
	</div><!--end portfolio-content -->
</div><!-- end wrapper -->  

<script type="text/javascript">
	$.getJSON('movies.txt', function(data) {
		var output="<ul>";
		for (var i in data.movies) {
			output += "<li class='portfolio-item' data-id='id-" + data.movies[i].id + "' data-type='cat-item-" + data.movies[i].category + "'>";
			output += "<div>";
			output += "<span class='image-block'>";
			output += "<a class='image-zoom' href='" + data.movies[i].imgbig + "' rel='prettyPhoto[gallery]' title='" + data.movies[i].title + "'>";
			output += "<img width='225' height='140' src='" + data.movies[i].thumbs + "' alt='" + data.movies[i].title + "' title='" + data.movies[i].title + "' /></a>";
			output += "</span>";
			output += "<div class='home-portfolio-text'>";
			output += "<h2 class='post-title-portfolio'><a href='" + data.movies[i].url + "' rel='prettyPhoto[ajax]' title='" + data.movies[i].title + "'>" + data.movies[i].title + "</a></h2>";
			output += "<p class='post-subtitle-portfolio'>released: 2008</p>";
			output += "</div>";
			output += "</div>";
			output += "</li>";
		}
		output+="</ul>";
		console.log(output);
		//document.getElementById("placeholder").innerHTML=output;
		//$('#placeholder').append(output);
		$('#placeholder').html(output);
	});	
</script>
</body>
</html>