Javascript 重新添加对话框时出现JQuery移动异常

您好（我可能没有正确执行此操作）-我正在尝试使用“changePage（）”将页面作为对话框加载时，在JQuery Mobile（JQM）应用程序中导航到页面时遇到问题。我环顾四周，尝试了一些没有运气的替代方案：(

例如，我有一个登录页面，该页面在应用程序初始化时作为对话框成功打开：

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

登录屏幕有一个登录按钮，当时钟转到正常（非对话）页面时，再次成功并再次使用changePage：

$.mobile.changePage( page );

当我再次尝试在对话框中加载登录页面时（例如，注销时），会出现此问题。我有一个注销按钮，单击该按钮可导航回登录页面：

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

但是，这次我在JQM库中遇到了以下异常：“uncaughttypeerror:无法调用undefined的'indexOf'方法”

下面是一些重现问题的示例代码：

<script type="text/javascript">

$(function()  {
    createPage("login");
});

function createPage( pageStr ) {  
    var page = $("<div id='pageWrapper' class='pageWrapper' data-role='page' ></div>");
    var header = createHeader( pageStr );
    var content = createContent( pageStr );

    page.append(header, content);

    $("body").append( page );

    if(pageStr == "login") {     
        $.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 
    }
    else {
        $.mobile.changePage( page );
    }
}

function createHeader( pageStr ) {
    var headerContainer = $("<div id='header' class='header' data-role='header' data-position='fixed'></div>");

    if(pageStr != "login") {
        var logOutButton = $("<a onclick='logout()' class='ui-btn-right' data-rel='dialog'>Logout</a>");
        headerContainer.append(logOutButton);
    }

    var headerTitle = $("<h1>Page: " + pageStr + "</h1>");
    headerContainer.append(headerTitle);
    return headerContainer;
}

function createContent( pageStr ) {
    var contentDiv = $("<div id='content' class='content' data-role='content'></div>");
    var contentBuilder = $("<div></div>");

    if(pageStr == "login") {
        contentBuilder.append(createloginForm());
    }
    else {
        contentBuilder.append(createWrapper());
    }
    contentDiv.append(contentBuilder);
    return contentDiv;
}

function createloginForm() {
    var form = $("<form id='loginForm' method='post'></form>");
    var loginButton = $("<p><input type='button' value='Login' onclick='login()'></input></p>");
    form.append(loginButton);
    return form;
}

function createWrapper() {
    var tmpText = $("<h2>some content ...</h2>");
    return tmpText;
}

function login() {
    createPage("main")
}

function logout() {
    createPage("login"); // pages[0] = login page
}

</script>

$（函数（）{
createPage（“登录”）；
});
函数createPage（pageStr）{
变量页=$（“”）；
var header=createHeader（pageStr）；
var content=createContent（pageStr）；
页。追加（标题、内容）；
$（“正文”）。附加（第页）；
如果（pageStr==“登录”）{
$.mobile.changePage（第页，{transition:'pop'，role:'dialog'}）；
}
否则{
$.mobile.changePage（第页）；
}
}
函数createHeader（pageStr）{
var headerContainer=$（“”）；
如果（pageStr！=“登录”）{
var logOutButton=$（“注销”）；
headerContainer.append（注销按钮）；
}
var headerTitle=$（“页面：+pageStr+”）；
headerContainer.append（headerTitle）；
返回头容器；
}
函数createContent（pageStr）{
var contentDiv=$（“”）；
var contentBuilder=$（“”）；
如果（pageStr==“登录”）{
append（createloginForm（））；
}
否则{
append（createWrapper（））；
}
contentDiv.append（contentBuilder）；
返回contentDiv；
}
函数createloginForm（）{
变量形式=$（“”）；
var loginButton=$（“
”）；
表单追加（登录按钮）；
申报表；
}
函数createWrapper（）{
var tmpText=$（“某些内容…”）；
返回tmpText；
}
函数登录（）{
createPage（“主”）
}
函数注销（）{
createPage（“登录”）；//页面[0]=登录页面
}

谢谢，

---

Jon.

感谢您的评论-我没有在示例中提到/包括，我每次都在清理页面，因此没有添加重复的元素或ID（每次只添加/呈现一个页面）

我想我已经解决了这个问题，在挂起页面之前手动初始化了页面-不确定它是否是一个“cosier”修复程序，但似乎有效：

在调用changePage（）方法之前，我需要首先初始化新页面：E.mobile.initializePage（）

再次感谢，

---

Jon.

您是否可能试图在注销时使用相同ID在页面上创建一个重复的div元素？我在本例中没有包括的是，我还清理了页面/div（删除任何现有元素）所以我不这么认为……我会仔细检查一下。我想这也可能是个问题——如果您首先使用JQM创建一个页面，然后手动将其从JQM外部删除，然后再次尝试创建同一个页面——旧页面在DOM中不存在，所以我猜JQM将尝试在内部搜索它，但在索引上超出边界时失败（）callI在不删除页面时也会遇到同样的问题：（源页面（登录）和目标页面（主页）都有相同的id（pageWrapper），这可以解释更改页面时出现的问题。您是否尝试根据页面修改此id以避免重复？