jQuery Mobile 中的动态页面转换答案

【问题标题】：Dynamic page transitions in jQuery MobilejQuery Mobile 中的动态页面转换
【发布时间】：2015-09-12 07:24:39
【问题描述】：

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

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

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

【问题讨论】：

你在做这样的事情吗：jsfiddle.net/ezanker/e4orL2c2
不完全。第一个页面也是动态创建的。我正在尝试创建一个小提琴来演示，但它还没有工作。否决票是怎么回事？
我有一个小提琴：jsfiddle.net/PointlessSpike/hxsmaup2/6。不幸的是，它甚至没有解决那个错误，因为由于某种原因它没有在第二个页面更改后触发 changePage 函数，但这是我正在尝试做的事情的一般要点。

标签： jquery html jquery-mobile dynamic

【解决方案1】：

我通过使用 event delegation 绑定动态按钮使您原来的小提琴工作：

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();
    });
});

更新FIDDLE

【讨论】：

我想我明白发生了什么。这真的很奇怪。我认为按钮的 id 相同导致绑定持续存在，并在下次绑定发生时导致问题。谢谢！

【解决方案2】：

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

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

【讨论】：