Question

I’m a beginner jquery user so I’m really hoping this will be quite straight forward for someone with a bit of experience. I recently implemented a jquery script that loads the content for a div from another html page. This works beautifully and I’m really happy with the result. The problem I’m now having is that my Lytebox and Flexcroll scripts won’t work on the loaded content. Below is the load content script. I thought I could just add

fleXenv.initByClass("flexcroll"); 
initLytebox();

to the end of the script. This doesnt work when the content is loaded the first time. But if I click a dead link in the page and it runs this script again then the Lytebox and Flexcroll scripts kick in. I basically need to know when and how to refresh the Lytebox and Flexcroll scripts

$(document).ready(function() {  
$('#nav li a').click(function(){  

var toLoad = $(this).attr('href')+' #content';  
$('#content').fadeOut('400',loadContent);  
$('#load').remove();  
$('#wrapper').append('<span id="load">LOADING...</span>');  
$('#load').fadeIn('normal');  
function loadContent() {  
    $('#content').load(toLoad,'',showNewContent()); 
}  
function showNewContent() {  
    $('#content').fadeIn('400',hideLoader());  
}   
function hideLoader() {  
    $('#load').fadeOut('normal');  
}  
return false;  
}); 


});  

Any help would be much appreciated. I am currently at the bottom of a 3day pit of dispair. Dreamweaver is making a fool of me!

Answer 1

Sussed it! For anyone who is suffering with this as I have for the last 3 days. Here is my fix:

I created a new script in the html header:

$(document).ajaxComplete(function(){     
// fire when any Ajax requests complete }) 

And then told all scripts to initialise within this script.