重新添加对话框时出现 JQuery Mobile 异常答案

【问题标题】：JQuery Mobile exception when re-adding dialog重新添加对话框时出现 JQuery Mobile 异常
【发布时间】：2013-01-23 09:27:18
【问题描述】：

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

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

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

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

$.mobile.changePage( page );

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

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

但是这次我在 JQM 库中得到以下异常：“未捕获的 TypeError：无法调用未定义的方法 '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>

谢谢，乔恩。

【问题讨论】：

您是否有可能在注销时尝试在页面上创建具有相同 ID 的重复 div 元素？
我在这个例子中没有包括的是我还清理了页面/div（删除任何现有元素）所以我不这么认为......不过我会仔细检查一下。
我想这也可能是一个问题 - 如果您首先使用 JQM 创建一个页面，然后在 JQM 之外手动将其删除并尝试再次创建相同的页面 - 旧页面将不存在DOM，所以我猜 JQM 会尝试在内部搜索它并在 indexOf() 调用中超出范围而失败
我在不删除页面时也会遇到同样的问题:(
原始页面（登录）和目标页面（主）具有相同的 id（pageWrapper），这可以解释您更改页面的问题。你有没有试过根据页面修改这个id，这样就不会重复了？

标签： javascript jquery jquery-mobile

【解决方案1】：

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

我想我已经通过在挂起之前手动初始化页面来解决这个问题 - 不确定它是否是一个“更舒适”的修复，但似乎可以工作：

在调用changePage()方法之前，需要先初始化新页面：E.mobile.initializePage();

再次感谢，乔恩。

【讨论】：