php - 使用 jQuery Mobile 动态创建虚拟页面

Question

我尝试使用 jQuery Mobile 链接虚拟页面，但我遇到了两个问题:

• 第一次加载页面时，没有应用 CSS。
• 当我选择一个页面并想切换到另一个页面时，我注意到每次经过该页面 1。

这是我的 example .

代码:

            var nbrButton = 3;
            $(document).ready(function(){
                for(i = 1;i <= nbrButton;i++) {

                    $("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1"  data-inline="true">1</a><a data-role="button" rel="internal" href="#p2"  data-inline="true">2</a><a data-role="button" rel="internal" href="#p3"  data-inline="true">3</a></div></div>');

                }
                $("#p1").show();

            });

你能告诉我问题是什么吗，或者是否有更好的方法。

谢谢。

Answer 1

更新

我还删除了链接中的 data-rel="internal"。

回答

我已经完成了以下内容。

代替

$('#p1').show();

我加这个

$.mobile.changePage( '#p1', { allowSamePageTransition: true });

它将刷新第 1 页 p1 以重新加载样式。

工作 example .