jquery ajax navigation in ajax navigation

Question

Я использую этот код для моей основной навигации по сайту, которая загружает каждую страницу через ajax и имеет резерв.

$(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'); 
});​ 

это работает нормально, но когда я загрузить в содержимое другой страницы, например about.html я также загружаются в некоторых более кнопок для навигации # содержимого обертке.

поэтому # content-wrap теперь содержит поле данных и еще несколько кнопок для навигации. когда я нажимаю на новую навигацию, ему нужно загрузить новые данные в поле данных.

Сначала я пробовал просто копировать сценарий выше, но с новыми якорями, однако у меня конфликт.

i figure Мне нужно какое-то утверждение if, я просмотрел что-то вроде if (function! == undefined), но не могу понять, что делать.

Я не уверен, насколько хорошо я себя объяснил, я смущен, объясняя это, но в основном я хочу совместить код выше с тем же кодом ниже, без конфликта.

$(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'); 
});​ 

Обновление: вид работ немного, но изменил мой план

$(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

У меня была аналогичная проблема, в основном, в большинстве случаев проблема с противоречивыми элементом идентификаторами. В DOM вы можете использовать идентификатор только один раз. Вы можете обойти это, используя имена классов и идентификаторы только для уникальных элементов, таких как обертки.