javascript – 使用jquery mobile克隆页面

2019-07-09 20:35:56 阅读：143 来源： 互联网

我正在从一个数组中构建一个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的默认链接劫持

解决方法:

好吧,结果证明这是一个愚蠢的错误：

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

我追加了一个< a>标签,但后来我仍然在使用navButtonGrid.left元素,这是一个ui-block div.把它改成

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

解决了这个问题.

标签：jquery,javascript,jquery-mobile
来源： https://codeday.me/bug/20190709/1416451.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用jquery mobile克隆页面