JQuery Selected Nav Problem

JQuery Selected Nav Problem

Hi,

Forgive me if this sounds bland, but bear with me! I have this problem where I'm loading a sub navigation into a div, which basically is:

function loadTabs(p)
{
    $("#footerTabsWrapper ul").load("/views/elements/subTabs.php?t="+ p +"&p="+ p);
}


Which is executed when the user clicks the main nav item:

$("#nav-pages span").click(function()
{
    loadTabs($(this).attr("title"));
});


What the loadTabs function does it loads html from a file and pulls the correct set of items and puts it into a div, the html looks something like this:

<div id="footerTabsWrapper">
<ul><li class="sel" title="home, 0">News</li>
<li title="home, 1">What's on</li>
<li title="home, 2">Offers</li>
<li title="home, 3">Opportunities</li>
</ul>
</div>


Which when you click on the tabs it loads the content up in a div. The problem that I've got is that when you click the main nav, it loads up the correct set of tabs, but when you click on the sub-nav tab it doesn't change selective state or load up the content like its suppose to. I've narrowed down the problem to jQuery not recognising the new html within that div. Here is the js for clicking on the sub-nav items:

$("#footerTabsWrapper ul li").click(function()
    {
        $("#footerTabsWrapper ul li").removeClass("sel");
        $(this).addClass("sel");

        // Get properties
        var data = $(this).attr("title");

        var dataArray = new Array();

        dataArray = data.split(", ");

        loadFooterContent(dataArray[0], dataArray[1]);
    });

function loadFooterContent(p, c)
{
    $("#footerStoryWrapper").load("/views/elements/footerContent.php?p="+ p +"&c="+ c);
}


Hope this all makes sense!

Any help or ideas will be much appreciated!

Ben

    • Topic Participants

    • ben