How to get jQuery .html() to interact with jquery prettyPhoto lightbox?

Question

I have a div called toprightbox whose html I am changing on click using jquery:

$(".icon").click(function(){
$("#toprightbox").html('<a rel="prettyPhoto[artwork]" href="large.jpg">
<img src="thumbnail.jpg"  width="100" height="100" /></a>'); 
}

The change in html above via jQuery makes a call to the prettyPhoto lightbox to open a larger image in the prettyPhoto lightbox...

I would like to know why this is not working. The link () and the html is generated but apparently making a jQuery call within jQuery code seems impossible. The prettyPhoto lightbox does not work...please help!

Answer 1

It works. The problem is the order in which you call the code.

1. Your page is loaded, all initial html is being rendered.
2. The plugin you are using is called in the $(document).ready(function() { .... }); part of your page (I hope!). If you call your lightbox plugin there (say, on the items with a certain class), it will apply it to all items currently falling within the bounds of that selector.
3. Afterwards, at some point in time, the user clicks an ".icon" element. Therefore, the new link is added. Your plugin does not work because it was never applied to that newly created link.

So you'll have to call your plugin again in a new step 4.