Script Outside of $(document).ready

I have built a site for a client and when the user clicks on a navigation link, the content of the linked page is dynamically loaded and transitioned in with JQuery, instead of loading the开发者_运维百科 new page.

The problem I am having is that because it is not loading a new page, $(document).ready doesn't fire again and any JS on the individual pages gets broken. For example, if you visit http://www.woodlandexotica.com/species.php the page works correctly, but if you try to navigate to the page from http://www.woodlandexotica.com/index_dev.php, the JS won't work.

I'm not an expert in JS and I really appreciate any and all help!

The problem is that when you call ".load()", you're using a URL string and a selector suffix to extract from the loaded content. When you use ".load()" that way, jQuery strips out all the scripts and does not run them. There's nothing you can do about that other than to implement your own version of ".load()" yourself, or (better) have the other pages you load not be complete HTML pages. If you use ".load()" without the selector suffix on the URL string, then jQuery does run the scripts.

See jQuery bug 6307 for more. The bug will not be fixed but hopefully the documentation will be improved.

The way you organized this code is wrong

Keep only binding's inside document.ready and move the logic outside to a functions..which can be accessed by any page.

$(document).ready(function() {


    //////////////////////////////////////////////////
    //////////////////////////////////////////////////

    // CONTENT BG SLIDESHOW

    //////////////////////////////////////////////////
    var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];

    var slideshowSpeed = 8000;

    var interval;   
    var activeContainer = 1;    
    var currentImg = 0;
    var navigate = function(direction) {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }

        // Check which container we need to use
        var currentContainer = activeContainer;
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }

        showImage(photos[currentImg - 1], currentContainer, activeContainer);       
    };

    var currentZindex = 1;
    var showImage = function(photoObject, currentContainer, activeContainer) {
        // Make sure the new container is always on the background
        currentZindex--;

        // Set the background image of the new active container
        $("#bgimg" + activeContainer).css({
            "background-image" : "url(" + photoObject + ")",
            "display" : "block",
            "z-index" : currentZindex
        });

        // Fade out the current container
        // and display the header text when animation is complete
        $("#bgimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
                animating = false;
            }, 500);
        });
        $("#bgimg" + currentContainer).css({
            "z-index" : "1"
        });
        currentZindex = 1;
    };

    function photoLoaded() {
        if(!--numPhotosLeft) {
            navigate("next");

            interval = setInterval(function() {
                navigate("next");
            }, slideshowSpeed);

            $('#bg_load').fadeOut('fast');
            $('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
        }
    }

    var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
    var numPhotosLeft = photos.length;

    for(var i = 0; i < photos.length; ++i) {
        var img = new Image();
        img.onload = photoLoaded;
        img.src = photos[i];
    }
    //////////////////////////////////////////////////
    //////////////////////////////////////////////////




    //////////////////////////////////////////////////
    //////////////////////////////////////////////////

    // PAGE TRANSITION

    //////////////////////////////////////////////////


    // ADJUST FOR DEEPLINKING
    var hash = window.location.hash.substr(1);
    var href = $('a.link').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php #page_bg';
            $('#page_bg').load(toLoad)
        }                                           
    });

    $('a.link').click(function() {

        var toLoad = $(this).attr('href')+' #page_bg';
        $('#page_bg').animate({opacity: 0.25, marginLeft: '-=875'}, 500, loadContent);

        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); //MODIFY FOR DEEP LINKING

        function loadContent() {
            $('#page_wrap').prepend('<span id="load">LOADING...</span>');
            $('#load').fadeIn('fast');

            $('#page_bg').css('marginLeft', 860);
            $('#page_bg').css('backgroundImage', 'none');
            $('#page_bg').load(toLoad,'',hideLoader);
        }
        function hideLoader() {
            $('#load').fadeOut('fast', showNewContent);
        }
        function showNewContent() {         
            $('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
        }

        return false;
    });

    //set initial position and opacity
    $('#page_bg').css('marginLeft', 860);
    $('#page_bg').css('opacity', 0.25);
    $('#page_wrap').prepend('<span id="bg_load">LOADING...</span>');
    $('#bg_load').fadeIn('fast');

    //////////////////////////////////////////////////
    //////////////////////////////////////////////////

});