jQuery script not loading after loaded via AJAX GET call

Question

I'm having a little difficulty trying to work out how to load a jQuery script after I load in a file from a jQuery AJAX GET.

This code is bound to the div id'd as navhome:

$('#navhome').live('click',getHome);

The code below is what gets the file from the server.

function getHome() {    
$('#pagecontent').fadeOut('fast', function() {
    $.ajax({
    type: "GET",
    url: "../../pages/home.php",
    success: postToPage});
});}

And this code places it on the page:

function postToPage(data, status) { 
$('#pagecontent').html(data);}

What I'm wanting to happen is to have a slider plug-in run when the file is loaded, but I'm having real difficulty understanding what I need to do to make it run.

I have the above powering a small website I made for my Minecraft Server, it's available at [http://www.chernobylserver.com][1] [1]: http://www.chernobylserver.com

. When you click on the Members page, it loads new content using the above, but when I click on Home, it does not reload the slider script.

If you're able to point me in the right direction, I would be eternally grateful to you. It's been upsetting me for a little while now. It's all new territory to me.

Answer 1

Just transform your nivoslider init into a function

 function startSlider() {
     jQuery('#slider').nivoSlider( [... options here ...] );
 }

and add it to postToPage();

   function postToPage(data, status) {  
     $('#ajaxcontent').html(data);
     $('#ajaxcontent').fadeIn('slow');
     $('#footerribbon').fadeIn('slow');
     startSlider();
   }

Also, quicktip: don't use .live(). Use $.on()