jQuery over loaded ajax content

Question

hello, I'm using fancybox plugin to show bigger images.

if I put in the html page

 <a id="fancy" href='img_big.jpg'><img scr="img.jpg" /></a>

it works fine, but if load with load() the same lines fancy box is not applied.

how can i fix that?

Answer 1

You haven't provided much detail, but you mention .load(). I assume this means you're dynamically updating the document after its initial load, and not seeing the fancybox plugin being applied to the new elements.

Fancybox Issue 18 (Google Code) describes some struggles to get the plugin working with jQuery's .live(). Comment 14 of the thread describes someone's apparent success by applying a class to the anchor tags in question, then using .live() to bind the fancybox behavior to the mouseover event on those selected tags. You'd make sure your <a> tags have a class of fancybox, and do something like this:

$(document).ready( function(){
  $('a.fancybox').live('mouseover', function(){ $(this).fancybox() });
});

We don't know what version of jQuery or fancybox you're using, so you may also look into the Live Query solution described in Comment 5 of that same thread.