jQuery 移动面板导航 freezing/hanging

Question

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

问题是导航菜单有时会在页面导航后自行挂起。它经常发生，因此您应该能够通过访问我提供的临时站点来复制它：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"; 
}

在后端，一切看起来都很好，只是导航面板挂起。当它发生时，其他一切都保持响应。

编辑 1： 面板代码：

<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 调用。

Answer 1

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

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

jQuery 移动面板导航 freezing/hanging

jQuery Mobile Panel Navigation freezing/hanging

html

ajax

jquery

jquery-mobile

playframework-2.5