2012-09-15 17 views
6

Ho una PhoneGap & jQuery App mobile che funziona bene su Android e sul web. Su iOS ricevo risultati imprevisti, che sembrano causati dal fatto che l'evento document.pageinit a cui collego il gestore per la maggior parte dei processi dell'app viene generato due volte.Documento pageinit si attiva più di una volta su iOS (jQueryMobile)

No, non l'ho associato due volte. No, non ho usato document.ready. Sì, l'ho legato al documento, all'inizio della sceneggiatura e non in altre funzioni.

$(document).on('pageinit',function(event){ 
    alert(' Pageinit on document'); 
    //Some more code 
}) 

La prima volta che si accende, lo schermo di avvio viene ancora visualizzato. A questo punto, durante il test su un MacBook Pro con XCode, la console non è nemmeno disponibile: il messaggio precedente non è apparso nella console quando ho usato console.log.

Seconda volta, gli incendi poco dopo jQueryMobile ha creato la prima pagina.

Che cosa sta causando questa doppia cottura e cosa posso fare al riguardo?

EDIT: Ho notato in seguito che quella pagina non si attiva solo una seconda volta, ma ogni volta che apro un nuovo data-role = 'page' div. Vedi la mia risposta qui sotto.

risposta

15

Apprezzo Zoltans risposta e può essere rilevante, in alcuni casi, ma che non era la causa.

$(document).on('pageinit') si attiva per ogni transizione di pagina utilizzata nell'app jQuery Mobile. Questo accadrà sia con collegamenti HTML che usando $.mobile.changePage();.

Sorprendentemente, lo docs non lo menziona da nessuna parte: ti consigliano di usarlo senza menzionare che si accenderà per ogni pagina successiva.

Non riesco a credere che stiano inquadrando questo esempio problematico come un equivalente valido di $(document).ready().

Dovrebbero consigliare di eseguire il binding utilizzando .one() anziché .bind() o on() per evitare l'esecuzione di più codice.

+0

Thaaaaank! Stavo cercando la soluzione per gli ultimi minuti, Google non dà nulla per "pageinit chiamato due volte", e il tuo ".one()" è la soluzione ideale. Vorrei alzare il limite di dieci se potessi :) – PiotrK

+0

Sorprendentemente, ho notato questo comportamento quando utilizzo il codice della mia app nei browser desktop (IE10 e Chrome/Windows) e non in iOS. Questa soluzione suggerita ha aiutato anche quei casi. Grande suggerimento. Grazie! –

2

Succede perché penso che tu usi jquery e jquery mobile insieme. Ma la soluzione è semplice. Prova

$(document:not(.processed)).addClass('processed').on('pageinit',function(event) 

Questo dovrebbe risolverlo

2

Modificare il corpo in <body data-role="page"> dovrebbe risolvere il problema.

0

Stavo lottando con quel problema troppo a lungo per non condividerlo con gli altri. E penso che non sia solo un problema con iOS ma anche con Android (ha causato sfarfallio nel mio caso).

L'evento "pageinit" è stato chiamato due volte ogni volta che è stata effettuata una richiesta. Il primo era quello giusto per ottenere i dati per l'url fornito, un altro è stato chiamato dopo che una nuova pagina è stata caricata in DOM (pagina jQueryMobile immessa dinamicamente nel documento).Penso che ci siano più soluzioni per risolvere questo problema, qui va il mio:

$(document).ready(function(){ 
    $(this).delegate("#page-selector", "pageinit", function(ev, data){}); 
    // I don't know why the line has to be present, but otherwise does not work 
}); 

E il mio documento HTML appare come segue:

<html> 
<head>...here goes scripts...</head> 
<body> 
    <div id="#page-selector"> <!-- just wrapper --> 
     <div data-role="page"> 
     ... content... 
     </div> 
    </div> 
</body> 
</html> 

Spero che risparmierà tempo prezioso per gli altri!

Problemi correlati