Ajax breaks jQuery scripts on page

I'm currently working on a website that you'll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.

I have managed to get this working fine, as you will see (please note the only two working pages are "Home" and "Experience RGW"), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.

As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the "Experience RGW" tab and scroll down to the text resize tool again. Notice that now that we've loaded in experience.php dynamically within the "#ajax" div, the script doesn't work. Also, if you click on the "Home" link now, you will also notice that the image rotator doesn't work.

I've looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it's currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?

Well, this is totally driving me crazy and I've tried hard to get it, but I just can't quite figure it out. I'm fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. :)

If anyone would be willing to shoot out a quick answer, or a few lines of code, I'd greatly appreciate it.

FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page 开发者_Go百科and Experience RGW page working correctly, so please don't waste time trying to diagnose problems on the other pages. I haven't gotten to them yet. :)

Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.

Thanks, Taylor

I'm behind a proxy and can't see your page, but it sounds like the events are not being re-attached to the content created through ajax.

I'll try to explain, when your page loads the first time, you are attaching jQuery events to DOM objects on document.ready(), this function will be called only once.

Every time you drop DOM objects and create new ones with the ajax response, these new objects never get jQuery events attached again, since the document.ready() function didn't fire.

You can try putting your event-attaching code in a different function and invoke that function on document.ready() AND after every DOM modification (your ajax call to change the tab content).

Hope it helps.

The problem is a breakdown in the order of executing code.

1. page loads
2. load event fires and sets up elements
3. click event
4. ajax loads the new page

The new page doesn't have any events set to it. Two solutions

1. use "live" links in the window.load event callback
2. use run the page load code again.

Solution 1 is nice but if you have an specific plugin used then it won't be the total solution.

Solution 2 can be implemented by pulling out your code in window.load and wrapping in another function. Just all it onload and then in the callback when the ajax loads.

I know how frustrating is can be. I hope this helps.

You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.

You can achieve this by modifying the code you use to update the page:

    $(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#ajax")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #ajax", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav li").removeClass("on");
                    $("nav a[href='"+newHash+"']").parent().addClass("on");

                    // Rebind any events
                    documenttextsizer.setup("text-resize");

                });
            });
    };

});

This applies to any events that happen WITHIN the updated elements in the page. So after the comment "//Rebind any events" you can add others as they are required! Hope that helps :)