jquery mobile popup n'attend pas un clic

Question

En utilisant jquery mobile 1.2, j'ai un menu contextuel (OK/Annuler) auquel il faut répondre avant de passer à une nouvelle page. Mais les changements de page (et le menu contextuel disparaît) avant qu'il clique sur:

if (rider.time.valueOf() > 0) { 
    $('#popupMsg').text("Rider has already finished; update the time?"); 
    $('#alreadyFinished').popup("open"); 
} 
alert("rf"); 
// other code....... 
$.mobile.changePage("#finishLine"); 
// other code....... 

je mets dans la « alerte » juste pour prouver que le pop-up ne semble en fait - il est, derrière l'alerte, mais le menu contextuel se ferme (et la page change) dès que l'on clique sur l'alerte. Également essayé d'enlever le 'autre code' mais toujours le même problème.

Voici le html:

<div data-role="popup" id="alreadyFinished" class="ui-content"> 
     <p id="popupMsg"></p> 
     <a data-role="button" data-theme="b" id="OKBtn">OK</a> 
     <a href="#finishLine" data-role="button" data-theme="c" id="cancelBtn">Cancel</a> 
    </div> 

Même sans les boutons dans la fenêtre, la fenêtre ne persiste pas. Alors, qu'est-ce qui ne va pas?

Answer 1

Une fenêtre contextuelle jQuery Mobile fait partie d'une page. Changer la page fermera n'importe quel popup actuel, donc vous ne devriez pas l'appeler directement après l'ouverture d'un popup. Le code suivant ouvrirait votre popup et ne le fermerait pas.

if (rider.time.valueOf() > 0) { 
    $('#popupMsg').text("Rider has already finished; update the time?"); 
    $('#alreadyFinished').popup("open"); 
} else { 
    alert("rf"); 
    // other code....... 
    $.mobile.changePage("#finishLine"); 
// other code....... 
} 

Si vous voulez que votre popup en modal, la façon la plus simple est de lier l'exécution du reste de votre code à la fermeture de la fenêtre. Par exemple, si vous voulez que la fonction restOfCode à exécuter après la fenêtre est fermée:

$('#alreadyFinished').popup("open"); 
$("#alreadyFinished").on({ 
    popupafterclose: function(event, ui) {restOfCode()} 
});