клонировать страницу с помощью мобильного jquery

Question

Я создаю список элементов в jQuery mobile из массива и разбиваю их на страницы.Верхний и нижний колонтитулы страницы включены PHP через функцию wordpress.По сути, я делаю подсчет количества страниц, которые мне нужны для размещения элементов в массиве, затем клонирую элемент страницы столько раз и зацикливаю их, чтобы добавить элементы к каждой.В конце каждой страницы я помещаю предыдущую и следующую кнопки.

Проблема в том, что кнопки вообще не меняют страницы.

Элемент страницы выглядит следующим образом:

<div data-role="page" id="press-media-page">

    <?php get_template_part("loop", "header"); ?>

    <div data-role="content">
        <h1>Press &amp; Media</h1>
    </div>

    <?php get_template_part("loop", "footer"); ?>

</div>

Чтобы создать каждую страницу:

newPage = $("#press-media-page").clone().attr({
    "id": "press-media-page-" + pageNumber,
    "data-url": "press-media-page-" + pageNumber
}).page();

А затем после добавления элементов и кнопок добавить ее в документ:

$.mobile.pageContainer.append(newPage);

После того, как я создалстраницы, я зацикливаю их и запускаю событие create:

$("#press-media-page").trigger("create");
for (var i = 1; i < pages; i++)
    $("#press-media-page-" + i).trigger("create");

Страница отображается в нужном месте в документе, а кнопки связаны с нужным идентификатором страницы, но, увы, они ненавигация.

Что мне нужно сделать, чтобы заставить это работать?

Редактировать

Вот как я создаю кнопки:

if (pageNumber > 0)
    navButtonGrid.left.append("<a>").attr({
        "href": "#press-media-page" + ((pageNumber > 1) ? "-" + (pageNumber - 1) : ""),
        "data-role": "button",
        "data-icon": "arrow-l",
        "data-iconpos": "left"
    }).text("View Newer");
if (pageNumber < totalPages - 1)
    navButtonGrid.right.append("<a>").attr({
        "href": "#press-media-page-" + (pageNumber + 1),
        "data-role": "button",
        "data-icon": "arrow-r",
        "data-iconpos": "right"
    }).text("View Older");

Я не перенял никаких событий с кнопок, просто использовал перехват ссылок по умолчанию на jQuery mobile

Answer 1

Хорошо, это оказалось глупой ошибкой:

navButtonGrid.left.append("<a>").attr({ //...

Я добавляю тег <a>, но затем я все еще работаю над элементом navButtonGrid.left, который является ui-block div. Меняя его на

navButtonGrid.left.append($("<a>").attr({ /* ... */ }));

решил проблему.