Trying to open fancybox from ajax data has been returned to page

[Acland]

I'm really new to this but I've scoured the forums and can't find a
solution. Basically I have a simple page that searches for some
recipes and using jQuery (ajax) the title of the recipes gets returned
to a <div> on the page with the title to the recipe and a link too.
That all works fine - people do the search, results are returned to
the page via jquery and displays perfectly in the div with links. (the
resulting links come in as <li>) in the following div:
<ul id="results" class="update"></ul>

What I want people to now be able to do is click those links and have
that page open in fancybox window - but i'm thinking that because the
returned results are made via an ajax call they somehow can't connect
with the fancybox script that is in the header of the page. The
fancybox script works, having tested it in the body of the page.

My question then is this: how do I get the fancybox script to fire
with results that are being returned from an ajax call?
Here's my script

<script type="text/javascript">
$(function() {

$("#various2").fancybox();
// activates the fancybox for the clicked link


$(".search_button").click(function() {
// Getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = 'search='+ searchString;

// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "search-check.php",
data: data,
beforeSend: function(html) { // this happen before
actual call
$("#results").html('');
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happen after we get
result

$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>

And this the results that are returned by the ajax call :
<a href="search-results.php?itemid=278" id="various2">Green Mango
Salad</a>

Pretty simple really but this is making my brain explode.

If I copy the link above and paste it into my page in the body
somewhere, the link opens a fancybox with the page displayed
perfectly. But I can't for the life of me get the returned result to
fire fancybox from the <div> that handles the returned search query.

Any help would be greatly appreciated and apologies for the long-
winded post.

Acland

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[Acland]

I've solved the issue but have created another one. I needed to call
the fancybox function again in the returned data: which meant adding $
("#various2").fancybox(); after the success:function part of my data
- so now it looks like this:

success: function(html){ // this happen after we get result
$("#results").show();
$("#results").append(html);

$("#various2").fancybox();
}

This makes the first returned result open in a fancybox but the
following results won't open because it looks like I need a separate
ID for all of them - various3, various4 etc etc. I can easily get my
php script to add the IDs but I'm going to have to work out how to get
javascript to cycle through the :-(.