jQuery Mobile Panel Navigation Einfrieren/Hängen

Question

Ich habe einige Probleme, über die ich keine Dokumentation im Internet finden konnte.

Das Problem ist, dass das Navigationsmenü manchmal nach dem Navigieren auf der Seite hängen bleibt. Es passiert ziemlich oft, so dass Sie in der Lage sein sollten, es zu replizieren, indem Sie die temporäre Website, die ich aufbaute: https://infinite-temple-73811.herokuapp.com

Versuchen Sie, von Seite zu einer anderen Seite zu navigieren und zu wiederholen, und es sollte nach einigen Klicks geschehen.

Ich bin nicht sicher, warum dies geschieht, aber mein Verdacht ist, dass es etwas mit diesem den Menüpunkt ‚Snabba frågor‘ und ‚Topplistan‘ initiiert AJAX-Aufrufe zu tun.

Auch erwähnenswert ist, dass es eine einzelne HTML-Datei ist.

ich ruft AJAX wie folgt

$(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!'); 
    }); 
}); 

Und sieht die quizStarted Methode wie folgt aus:

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"; 
} 

Im Back-End alles in Ordnung zu suchen scheint, es ist nur die Navigation Panel, das hängt. Alles andere bleibt reaktiv während es passiert.

EDIT1: Das Panel Code:

<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:

Nachdem einige weitere Untersuchung Ich glaube eigentlich nicht, dass es mehr auf die AJAX-Anrufe in engem Zusammenhang steht. Denn wenn Sie nur zwischen Home und Login navigieren, passiert es immer noch, sie initialisieren keine AJAX-Anrufe.

Answer 1

Der Kommentar von Omar reparierte es für mich.

Anstatt viele Panels mit der gleichen ID in jeder Seite zu verwenden, wechselte ich zu einem externen Panel. Jetzt geht es viel besser.