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

Question

我尝试使用jQuery Mobile链接虚拟页面,但我有两个问题:

• 我第一次加载页面时,不会应用CSS.
• 当我选择一个页面并且我想要更改到另一个页面时,我注意到每次经过页面1.

这是我的榜样.

代码:

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

它将刷新 Page-1p1以重新加载样式。

工作示例。