Dynamic Youtube Video With jQuery & jSON

So I have a jSON object coming back and I want to pull the thumbnails from the object, add click event, once clicked it builds the SWF player based on the jSON object. I'm having a hard time basically "binding" the thumbnail to the SWF. So when you click on this thumbnail build this SWF.

Here is a JSFiddle of pulling the thumbnails o开发者_JS百科ut. I'm not sure if I am setting this up right. Not sure if setting up the click event needs to be in the for loop.

jsfiddle.net/MW9HR/2/

Any help will be greatly appreciated.

---

It should not be in the loop, since you are (correctly) using the live method.

You are, however, passing the swf data incorrectly.

it should be $('.thumbnail').live('click', {swf:$swf}, function(e){

Now you can access it from inside the handler with e.data.swf

You also use the .die()^docs method to unbind previous live click handlers (in case your code is ran more than once), so

$('.thumbnail').die('click').live('click', {swf:$swf}, function(e){

---

I also, altered your code to add an identifier on each thumbnail so you can easily map them to the array of videos.

$videos += '<li class="video"><img class="thumbnail" data-videoid="'+$i+'" src="' + $thumbnail + '" alt="' +$title + '" /></li>';

You can retrieve this videoid when you click on the element with the .data()^docs method as $(this).data('videoid')

Demo at http://jsfiddle.net/gaby/JfqtK/