jquery ajax navigation within ajax navigation

Question

I'm using this code for my main site navigation which loads each page via ajax and has fallback.

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap");
    $("nav").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $contentWrap.load(newHash + " #content");
    });
    $(window).trigger('hashchange');
});​

this works fine but when i load in the content from another page for example about.html i am also loading in some more buttons for navigation within #content-wrap.

so #content-wrap now contains a data box and some more buttons for navigation. when i click on the new navigation it needs to load new data in the data box.

first i tried just pretty much copying the script above but with new anchors however i get a conflict.

i figure i need some sort of if statement, i have looked into something like if (function !== undefined) but cannot figure out what to do.

I'm not sure how well i have explained myself, i'm confused explaining it but basically i want to combine the code above with basically the same code below without a conflict.

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap"),
        $aboutWrap = $("#a-wrap");
    $("#content-wrap").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $aboutWrap.load(newHash + " #a-content");
    });
    $(window).trigger('hashchange');
});​

Update: kind of works a bit but changed my plan

$(function() {

var newHash = '',
        $nav = $("nav a"),
        $boxBtn = '',
        $aboutWrap = '',
        $contentWrap = $("#content-wrap");

$("nav").on("click", "a", function() {

    $(this).addClass("nav-click");

    window.location.hash = $(this).attr("href");

    return false;
});

$contentWrap.on("click", "a", function() {

    $(this).addClass("btn-click");

    window.location.hash = $(this).attr("href");

    return false;
});

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

    var     $aboutWrap = $("#a-wrap"),
                $boxBtn = $("div.btn a");

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


    if ($nav.hasClass("nav-click")){

    $contentWrap.load(newHash + " #content");
    $nav.removeClass("nav-click");
    };

    if ($boxBtn.hasClass("btn-click")){

        $aboutWrap.load(newHash + " #a-content");
        $boxBtn.removeClass("btn-click");
    };
});

$(window).trigger('hashchange');


}); /*/end*/

Answer 1

I had a similar problem, basically in most cases the problem is with conflicting element ID's. In the DOM you can use an ID only once. You can workaround that by using classNames and ID's for only unique elements like wrappers.