Ajax and facebox problem

Question

Hello, I have a website that uses ajax jquery and facebox. Demo here : http://temp.nevergone.eu/facebox.php Inside the div "#content" there are some links to other pages that open fine using facebox.

If I reload the content of that div using ajax jquery , then the links wont popup using facebox effect anymore.

I tried to create a function that I would call whenever I call the function that changes the contents of div #content , but no luck . I know that I must reinit/reload the facebox to DOM everytime I load something new to the page that contains rel="lightbox" ,but I cant figure it out how.I call this inside It works if I use jquery HTML function , but if I use load function it wont work anymore.

function updatec() {
    $("#content").load('sometext.html');
    reinit();
}

function reinit() {
  $('a[rel*=facebox]').facebox() ;
}

sometext.html contains only<a href="http://www.google.com" rel="facebox">CLICK ME I DONT WORK</a>(if you click it it wont open using facebox,it will open like a normal link)'

Answer 1

I think I got your problem. you are reinitializing your facebox script before you insert the content.

What you currently have is this:

function reinit() {
   $('a[rel*=facebox]').facebox() ;
}
function updatec() {
reinit();
$("#content").html('<a href="http://www.google.com" rel="facebox">CLICK ME I DONT          WORK</a>');
  }

You need to move your reinit function below the html insertion like so:

function updatec() {    
$("#content").html('<a href="http://www.google.com" rel="facebox">CLICK ME I DONT          WORK</a>');
    reinit();
  }

Sometimes you just need another pair of eyes on a problem.