Ajax навигация

Тема в разделе "JavaScript", создана пользователем SocMaster, 22 мар 2014.

Модераторы: ZiX
  1. SocMaster

    SocMaster aka Hakerok

    Регистр.:
    26 июл 2011
    Сообщения:
    202
    Симпатии:
    47
    Есть простенькая ajax навигация по сайту.
    Вроде работает нормально, но немного конфликтит с bootstrapPaginator то есть, то работает, то не работает, в консоли 0 ошибок вообще. страница из пагинации просто погружается без аякса
    Код:
    $(document).ready(function() {
            var href = $('ul li a').each(function(){
            var href = $(this).attr('href');
            $(window).bind("popstate",function(e){
            var returnLocation = e.location ||(e.originalEvent && e.originalEvent.location) ||document.location;
                $('#content').load(returnLocation)});                                         
            });
    
            $('ul li a').click(function(){
            hash = $(this).attr('href');
            if (hash.length > 4 ){
            history.pushState(null, null, this.href);       
            $('#content').hide('',loadContent);
            $('#sstatus_s').remove();
            $('#contentss').append('<div class="alert alert-success" id="sstatus_s">Загрузка...<img src="/images/gif.gif"></div>');
            $('#sstatus_s').fadeIn('normal');
            }
                function loadContent() {
            $( "#content" ).load(hash, function() {showNewContent()});
            }
            function showNewContent() {
                $('#footer').remove();
                $('#content').show('normal',hideLoader());
            }
            function hideLoader() {
                $('#sstatus_s').fadeOut('normal');
            }
            return false;
            });
        });
    Вроде же все верно?
    структура пагинации
    div
    ul
    li
    ul
    div

    UP
    Переходит только один раз по пагинации, потом без аякса загрузка
     
  2. dwarf

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
    Так происходит скорее всего из-за того, что события, отрабатывающие на клик по "пагинатору" навешиваются только при загрузке документа.
    Затем, когда пользователь кликает на страничку, пагинация отрабатывает аяксом, и перезагружает html, в который входит и пагинация. На новые элементы пагинатора события не навешены, и соответственно клик по ним отрабатывает как клик по по обычным ссылкам.
    Если пагинатор обновляется вместе с контентом страниц, нужно или перенавешивать события него при каждом переключении страниц, или навешивать событие на "body"
    Код:
    $( "body" ).on( "click", "ul li a", function() { ....
     
  3. alffcpu

    alffcpu Создатель

    Регистр.:
    23 окт 2013
    Сообщения:
    22
    Симпатии:
    56
    Если постраничная навигация внутри подгружаемой области (а это скорее всего так), то
    $('ul li a').click... - работать не будет. Т.к. это не распространяется на подгруженный контент, нужно использовать delegate.
    $('body').delegate('ul li a', 'click', function...

    Тогда на контент который под грузиться через ajax это тоже будет распространяться.
     
    SocMaster нравится это.