After page loaded with Ajax; jQuery does not work?

Question

I am using ajax to load content from other html documents div#left-column to current div#left-column. Within the div#left-column is a jQuery accordion plugin; that when loaded by ajax, does not work. How can I get this to work? Below is my code :

Top of page is loaded with jQuery and ajax script:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#mega-menu-2 li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #right-column';
            $('#right-column').load(toLoad)
        }                                           
    });

    $('#mega-menu-2 li a').click(function(){

        var toLoad = $(this).attr('href')+' #right-column';
        $('#right-column').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#right-column').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#right-column').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

then this snippet is included before </head> tag :

$(document).ready( function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    });

My HTML is below :

<div id="right-column" class="span-19 last">
            <!-- accordion -->
            <div id="accordion">
                <h2 class="current">First pane</h2>
                <div class="pane" style="display: block">
                    <img src="images/javascri.png" alt="JavaScript tools" style="float: left; margin: 0 15px 15px 0" />
                    <h3>Lorem ipsum dolor</h3>
                    <p><strong>Fusce semper, nisi nec pellentesque sollicitudin.</strong>
                    </p>
                    <p style="clear: both">Consectetur adipiscing elit. Praesent 
                    bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. 
                    Nulla id massa nec erat laoreet elementum. Vivamus tristique 
                    auctor odio. Integer mi neque. </p>
                </div>
                <h2>Second pane</h2>
                <div class="pane">
                    <h3>Vestibulum ante ipsum</h3>
                    <p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis 
                    id, dolor. Aliquam erat volutpat. Praesent pretium tristique 
                    est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis 
                    quis, pede. Aliquam erat volutpat. Donec sit amet urna quis 
                    nisi elementum fermentum. </p>
                </div>
                <h2>Third pane</h2>
                <div class="pane">
                    <h3>Curabitur vel dolor</h3>
                    <p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum 
                    viverra, purus felis egestas magna, non vulputate libero justo 
                    nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In 
                    mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.
                    </p>
                </div>
            </div>
        </div>
        <!--#right-column-->

jQuery is the only framework needed besides the ajax script for this to work. I've read some about the .live click function, but I do not know how to add it so that it works. Please help.

Sincerely,

Michael

Answer 1

A ploblem like yours solved here:

jquery not working after ajax call?

resources copied by this post:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Answer 2

You are applying the tabs function before the data is loaded. So tabs something along the lines of a null or empty set.

You need to load the data before applying tabs on it.

EDIT:

Assuming you are working with jQueryUI tabs.

Well there are different ways to do this, the one i would recommend, since you are already dealing with ajax, is the:

$( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }
    });

the ajaxOptions forces the tabs to load via ajax when switching between them.

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        Some pre-loaded text that will display when the app loads. 
    </div>
</div>

In the example above you will notice that the tabs are links that have a url and not just an anchor. So for links that have a url the value of the url will be loaded into the tab when it is selected.

So you would need a way to link to the text you want loaded but that shouldn't be to hard.