I create a list of elements in a jQuery mobile device from an array and paginate. The page title and footer are included by PHP through the wordpress function. Basically what I am doing is calculating the number of pages that I need to place the elements in the array, and then cloning the page element so many times and iterating over them to add elements to each. At the end of each page I put the previous and next buttons.
The problem is that 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 & 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();
Then, adding elements and buttons, add them to the document:
$.mobile.pageContainer.append(newPage);
After I created the pages, I scroll through them and fire the create event:
$("#press-media-page").trigger("create"); for (var i = 1; i < pages; i++) $("#press-media-page-" + i).trigger("create");
The page is displayed in the right place in the document, and the buttons are associated with the identifier of the right page, but, alas, they do not move.
What do I need to do to make this 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 did not capture any events using the buttons, just using jQuery mobile default link hijacking