Question

I’m building a list of items in jQuery mobile from an array, and paginating them. The page’s header and footer are included by PHP via a wordpress function. Basically what I’m doing is calculating the number of pages I need to accommodate the elements in the array, then cloning the page element that number of times, and looping over them to add the elements to each. At the end of each page I’m putting previous and next buttons.

The problem is that the buttons do not change pages at all.

The page element looks like this:

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

To create each page:

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

And then after adding the elements and buttons, to append it to the document:

$.mobile.pageContainer.append(newPage);

After I’ve created the pages, I loop over them and trigger the create event:

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

The page appears in the right place in the document, and the buttons are linked to the right page ID, but alas they don’t navigate.

What do I have to do to get this to work?

Edit

This is how I create the buttons:

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");

I haven’t taken over any events from the buttons, just using jQuery mobile’s default link hijacking

Answer 1

Okay, so it turned out to be a silly mistake:

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

I append an <a> tag, but then I’m still working on the navButtonGrid.left element, which is a ui-block div. Changing it to

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

has solved the problem.