Как перейти на предыдущую страницу динамически с помощью jquery?

Question

Я очень новичок в JQuery/JQuery Mobile. Я пытаюсь получить предыдущую страницу динамически с помощью jquery. Я попытался, но он не работает должным образом, может кто-нибудь помочь мне в этой проблеме.

Мой код в fiddle

Когда я нажимаю на Next & Prev кнопки его рабочих штрафа в первый раз, но, когда я буду снова делать то же самое во второй раз кнопку «пред» работает нормально кнопку «Далее» не работает он автоматически переходит к следующим ссылкам, а также файл не загружается в первый раз.

Может ли кто-нибудь помочь мне работать правильно.

Спасибо заранее.

Обновленный вопрос:

плитки также как вид сетки, но плитки несколько иной, чем сетки.

На этом рисунке показан только сетчатый сет, но только в плитках мы не будем показывать все названия за раз.

Например: рассмотрим это изображение. Здесь у нас есть названия от A до F, используя сетку. Также смотрите на плитки. У нас есть названия от A до F, которые мы показываем названиям, зависит от размера экрана. если у нас больше, чем от A до F, тогда у нас есть «одна кнопка», на которой отображается количество названий. Когда мы нажимаем на это, тогда он должен открыть остальные оставшиеся заголовки.

Answer 1

Перемещение между страницами с использованием $.mobile.changePage() и путем извлечения [data-role=page] идентификатора предыдущих .prev() и последующих страниц .next().

Demo

Создание страниц динамически

$(document).on('pageshow', '#chapter', function() { 
var length = $('#chapter [data-role=listview] li a').length; 
$('#chapter [data-role=listview] li a').each(function (i) { 
    var file = $(this).attr('file'); 
    var content = $(this).text(); 
    var seq = $(this).data('sequence'); 
    if ($('[data-role=page]#' + seq).length === 0) { 
    $($.mobile.pageContainer).append('<div data-role="page" id="' + seq + '" class="listitems"><div data-role="header"><a href="#" data-role="button" class="prev" data-icon="arrow-l">Prev</a><h1 id="header2">' + content + '</h1><a href="#" data-role="button" class="next" data-icon="arrow-r">Next</a></div><div data-role="content"></div><div data-role="footer" data-position="fixed"><a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a></div></div>'); 
    $('[data-role=page]#' + seq + ' [data-role=content]').load(file); 
    if (i === 0) { 
    $('[data-role=page]#' + seq).addClass('first'); 
    } 
    if (length == (i + 1)) { 
    $('[data-role=page]#' + seq).addClass('last'); 
    } 
    } 
}); 
}); 


$(document).on('click', '#chapter [data-role=listview] li a', function() { 
var goto = '#' + $(this).data('sequence'); 
$.mobile.changePage(goto); 
}); 

Навигация

// Next page 
$(document).on('click', '.next', function() { 
var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id; 
$.mobile.changePage(next, { 
    transition: 'slide' 
}); 
}); 

// Previous page 
$(document).on('click', '.prev', function() { 
var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id; 
$.mobile.changePage(prev, { 
    transition: 'slide', 
    reverse: true 
}); 
}); 

Показать/Скрыть кнопки навигации

$(document).on('pagebeforeshow', '[data-role=page].listitems', function() { 
if ($(this).hasClass('first')) { 
    $('.prev').hide(); 
    $('.next').show(); 
} 
else if ($(this).hasClass('last')) { 
    $('.prev').show(); 
    $('.next').hide(); 
} 
else { 
    $('.next, .prev').show(); 
} 
}); 

Answer 2

попробовать это

$(document).ready(function() { 
    var referrer = document.referrer; 
    }); 

Answer 3

Это будет работать. :)

<a href="#" data-rel="back" data-role="button">Go back</a>