重新添加對話框時的jQuery Mobile異常

Question

嗨（我可能未正確執行此操作）-嘗試使用“ changePage（）”將頁面加載為對話框時，我試圖在JQuery Mobile（JQM）應用程序中瀏覽頁面時遇到問題。 我環顧四周，並嘗試了一些沒有運氣的選擇:(

例如，我有一個登錄頁面，該頁面作為應用程序init上的對話框成功打開：

$.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>

謝謝，喬恩。

Answer 1

感謝您的評論-我沒有在示例中提及/包含該示例，因為我每次都在清潔頁面，因此不會添加重復的元素或ID（任何時候只能添加/呈現一個頁面）。

我想我已經通過在掛起頁面之前手動初始化頁面來解決此問題-不確定它是否是“更舒適的”修復程序，但似乎可以正常工作：

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

再次感謝，喬恩。