使用jquery mobile克隆頁面

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

頁面顯示在文檔的正確位置，按鈕鏈接到右頁面ID，但是它們不會導航。

我該怎么做才能讓它發揮作用？

編輯

這是我創建按鈕的方式：

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({ /* ... */ }));

解決了這個問題。