jQuery 移动设备中的动态页面转换

Question

作为新项目的一部分，我必须动态创建 jQuery 可在其间导航的移动页面。所以我需要能够创建一个页面，导航到它，然后删除上一个页面。这些页面是根据服务器提供的 JSON 创建的。我的意图是避免为这些页面使用任何静态标记并完全动态地创建它们。

不幸的是，过渡似乎不再有效——我唯一能用这种方法工作的是淡入淡出。有趣的是，似乎我不是唯一遇到这个问题的人。 jQuery 手机 demo page 有同样的问题。他们没有设置过渡属性，所以它应该默认为滑动，但它正在褪色，就像我的一样。

查找问题没有帮助。其他人似乎有问题，但没有解决方案。这是 jQuery Mobile 的已知问题吗？是什么原因造成的？我必须使用静态页面吗？

Answer 1

我意识到这似乎只有在我保持正在创建的页面的 ID 相同时才会发生。这是因为我会在切换到下一页后销毁上一页。我的解决方案是不这样做；使页面保持活动状态，并在下次发生切换时销毁它们，方法是将它们存储在一个数组中，检查是否有两个以上，然后销毁第一个。因此，您只存储了两个页面，这就足够了。

不过，我会保留这个问题，以防有人有更好的解决方案。

Answer 2

我已经通过使用 event delegation 绑定动态按钮使您原来的 fiddle 工作：

var pageName = "default";

$(document).ready(function () {
    function changePage() {
        var newName = pageName == "alpha" ? "beta" : "alpha";

        $("body").append("<div id=\"" + newName + "\" data-role=\"page\"><a id=\"dynamicButton\" data-role=\"button\">" + pageName + "</a></div>");

        $(":mobile-pagecontainer").pagecontainer("change", "#" + newName, {
            transition: "slide"
        });
        $("#" + pageName).remove();
        pageName = newName;
    };

    changePage();

    $(document).on("click", "#dynamicButton", function () {
        changePage();
    });
});

Updated FIDDLE

jQuery 移动设备中的动态页面转换

Dynamic page transitions in jQuery Mobile

html

jquery

dynamic

jquery-mobile