Ajax page load without reload

Question

I am working on a script to load my page without refreshing. It is working as I want it except for one thing. The test site I have up is http://dev.dog-company.com . Only home About us and FAQ will work with the script right now.

The issue is on the homepage there is a slider loaded via a plugin(click on home while on home). When I load it via AJAX my script does not load it the proper way it is supposed to. I am not sure why. Could someone explain why it is not working?

$('document').ready(function() {
$('a[rel="load"]').click(function(e){
    e.preventDefault();
    var link = $(this).attr("href");
    if(link!=window.location){
                window.history.pushState({path:link},'',link);
    }
    $('#slider-wrapper').slideUp().empty();
    $('#content').wrap('<div id="wrap-overlay"></div>');
    $.ajax({
    //ajax setting
        type: 'POST',
        url: link,
        dataType: 'html',
        success : function(data, text, xhr){
            //parse data
            var response = $("<div>").html(data);

            var parser = new DOMParser();
            var preParse = data.match(/<head[^>]*>[\s\S]*<\/head>/gi);
            var headHTML = parser.parseFromString(preParse, "text/html");
            var head = $(headHTML).find('head').html();
            var slider = response.find('#slider-wrapper').html();
            var content = response.find('#content').html();
            var footer = response.find('#wp-footer').html();

            //Post data
            $('#content').empty().append(content);
            $('head').empty().append(head);
            if(slider != null){
                if($("#slider-wrapper").length == 0){
                    $('#content').insertBefore('<section id="slider-wrapper"></section>');
                }
                $("#slider-wrapper").empty().append(slider);
            }
            $("#content").empty().append(content);
            return false;
        }})
        if($('#slider-wrapper').length > 0){
            $('#slider-wrapper').slideDown();
        }
    });
});

Any help would be appreciated,

Answer 1

You can re-initialize all the scripts once again inside the AJAX success.

// Fetch the scripts
scripts = '';
if ( scripts.length ) scripts.detach();
scripts = response.find('script');

// Add the scripts
scripts.each(function(){
        var script = jQuery(this), 
            scriptText = script.html(), 
            scriptNode = document.createElement('script');
        try {
                // doesn't work on ie...
                scriptNode.appendChild(document.createTextNode(scriptText));
                contentNode.appendChild(scriptNode);
        } catch(e) {
                // IE has funky script nodes
                scriptNode.text = scriptText;
                contentNode.appendChild(scriptNode);
        }
        if(jQuery(this).attr('src') != null) {
                scriptNode.setAttribute('src', (jQuery(this).attr('src')));
        }
});