jQuery Mobile 面板导航冻结/挂起

Posted 2023-05-09

【中文标题】jQuery Mobile 面板导航冻结/挂起

【英文标题】：jQuery Mobile Panel Navigation freezing/hanging

【发布时间】：2016-10-28 04:41:03

【问题描述】：

我遇到了一些我无法在网络上找到相关文档的问题。

问题是导航菜单有时会在浏览页面后自行挂起。它经常发生，所以你应该可以通过访问我放置的临时站点来复制它：https://infinite-temple-73811.herokuapp.com

尝试从一个页面导航到另一个页面并重复，点击几次后应该会发生。

我不确定为什么会发生这种情况，但我怀疑这与菜单项 'Snabba frågor' 和 'Topplistan' 有关 发起 AJAX 调用。

另外值得注意的是它是一个单独的 html 文件。

我执行如下 AJAX 调用

$(document).delegate('#startQuiz', 'click', function () 
    $.ajax(
        headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
         ,
         type: 'GET',
         url: '/quickQuiz',
         async: false,
         success: quizStarted,
         fail: onFail,
         statusCode: 
             401: function () 
                 $.growl.error(message: "Error vid validate...");
             
        
    ).done(function () 
        console.log('Login Ajax done!');
    );
);

而且，quizStarted 方法如下所示：

var quizStarted = function (data, textStatus, xhr) 
    console.log("Validate done.");

    var result = jQuery.parseJSON(data);

    $('#imagePath').attr("src", result.image);
    $('#quickQuestion').text(result.question);
    $('#quickOne').text(result.quickOne);
    $('#quickTwo').text(result.quickTwo);
    $('#quickThree').text(result.quickThree);
    $('#quickFour').text(result.quickFour);
    $('#currentPoints').text(result.points);
    location.href = "#quickQuiz"; 

在后端，一切似乎都很好，只是导航面板挂了。其他一切都在发生时保持响应。

EDIT1： 面板代码：

<div data-role="panel" id="panel" data-position="right" data-display="reveal" class="ui-btn-right">
    <h2>Meny</h2>
    <ul data-role="listview">
        <li data-icon="home"><a href="#home">Home</a></li>
        <li><a id="startQuiz">Snabb frågor</a></li>
        <li><a id="displayHighscore">Topplistan</a></li>
        <li class="adminPage"><a href="#admin">Admin</a></li>
        <li class="login"><a href="#dologin">Login</a></li>
        <li class="logout" data-icon="delete"><a id="logoutBut">Logout</a></li>
    </ul>
</div>

EDIT2：

经过进一步调查，我实际上不再相信它与 AJAX 调用有关。因为如果您只是在 Home 和 Login 之间导航，它仍然会发生，它们不会初始化任何 AJAX 调用。

【问题讨论】：

面板的ID在所有页面都相同？在主播中，您错过了#，例如href="#startQuiz".

面板 ID 是一样的。省略的 href 用于之前需要 AJAX 调用的页面，导航在 ajax 调用之后完成，location.href="#..." 之后。

您的问题是由于在所有面板上使用相同的 ID 造成的。如果面板在所有页面上都相同，则使用外部面板 (***.com/a/21857463/1771795) 或为每个面板使用唯一 ID。要在页面之间切换，请使用$.mobile.pageContainer.pagecontainer("change", "#page ID or URL") (***.com/a/19186330/1771795)

【参考方案1】：

Omar 的评论帮我解决了这个问题。

我没有在每个页面内使用许多具有相同 ID 的面板，而是改为使用外部面板。现在效果好多了。