Question

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

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

尝试从页面导航到另一个页面并重复，并且应该在点击一下后发生。

我不确定为什么会这样，但我怀疑它与菜单项'Snabbafrå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调用有关。因为如果您只是在主页和登录之间导航，它仍然会发生，它们不会初始化任何AJAX调用。

Answer 1

奥马尔的评论为我修好了。

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

jQuery Mobile Panel导航冻结/悬挂

1 个答案: