I have built a site that uses an index page which has a containing div for loading each page's content into.

At first I was including the external js files and doing the initialisations inside each individual page but 8/10 times the page was loaded, the elements relying on plugins being initialised didn't work but would upon a refresh.

Yesterday I changed the structure so that all external files and all initialisations were done in the index page rather than each individual page.

Now, everything seems to work first time but the second time the page is loaded via ajax the plugins aren't initialised.

Here is how I am doing it in my index page. (excuse inline js on the nav - wasn't me!)

// js files included at the top

<div id="navbar">
    <ul class="clearfix">
        <li>
            <a id="myoeHome" onclick="loadContent('/myoe/amb-home.php')" href="javascript:void(0)"> Home </a>
        </li>
        <!-- some more li a's in the nav bar -->
    </ul>
</div>

jQuery

function loadContent(url) {

    // #content is the containing div where each page is loaded into
    $("#content").load(url, function() {

        if (url == '/myoe/amb-home.php') {

            // initialisations etc. for the particular page

        }

    });


}

Any ideas on what I could do to improve the structure? There are even functions inside the loadContent function because I just moved all js for each page into its own if block.