jQuery mobile $ (documento) .ready equivalente

nelle pagine di navigazione ajax, il classico modulo “documento pronto” per l’inizializzazione di javascript semplicemente non si triggers.

Qual è il modo giusto per eseguire codice in una pagina caricata con Ajax?

(Voglio dire, non è la mia ajax … è il sistema di navigazione della jquery per dispositivi mobili che mi porta in quella pagina)

Ok, ho sospettato qualcosa del genere … grazie mille =) Ma … continua a non funzionare, ecco il mio codice:

 

   mypage     $('div').live('pageshow',function(event, ui){ alert('ciao'); });    

Shopping Cart

asd

Devo specificare l’ID div?

    Ho passato un po ‘di tempo a ricercare la stessa cosa visto che i documenti JQM non sono molto dettagliati a questo punto. La soluzione qui sotto funziona bene per me:

      

    È necessario implementare il proprio stream di controllo per impedire l’inizializzazione multipla poiché il codice precedente verrà eseguito su ogni cambio di pagina

    Associare all’evento “pageinit”. Da documenti JQM: http://api.jquerymobile.com/pageinit/

    Il migliore equivalente di $(document).ready() è $(document).bind('pageinit')

    Dai un’occhiata alla documentazione di jQuery Mobile: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

    Importante: utilizzare $ (document) .bind (‘pageinit’), non $ (document) .ready ()

    La prima cosa che impari in jQuery è chiamare il codice all’interno della funzione $ (document) .ready () in modo che tutto venga eseguito non appena viene caricato il DOM. Tuttavia, in jQuery Mobile, Ajax viene utilizzato per caricare i contenuti di ogni pagina nel DOM mentre si naviga, e il gestore DOM ready viene eseguito solo per la prima pagina. Per eseguire il codice ogni volta che una nuova pagina viene caricata e creata, è ansible eseguire il binding all’evento pageinit. Questo evento è spiegato in dettaglio nella parte inferiore di questa pagina.

    Se vuoi che il codice funzioni su una certa pagina (scommetto che sia così) puoi usare questo modello:

     $('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){ // code to execute on that page //$(this) works as expected - refers the page }); 

    Eventi che puoi usare:

    • pagebeforeshow inizia appena prima della transizione
    • pageshow inizia subito dopo la transizione
    • pagecreate avvia solo la prima volta che viene caricata la pagina

    Tutte le pagine in mostra e prima della pagina mostrano gli eventi vengono chiamati ogni volta che viene visualizzato. Se vuoi qualcosa che accade la prima volta, puoi fare qualcosa del genere:

      $('#pageelementid').live("pagecreate", pageInitializationHandler); 

    Quindi più avanti nel tuo codice:

      function pageInitializationHandler(event) { //possibly optional based on what exactly you're doing, //but keep it in mind in case you need it. //Also, this seems to need to be an exact duplicate of the //way you used it with the .live() method or jQ/jQM won't unbind //the right thing $('#pageelementid').die("pagecreate", pageInitializationHandler); //Do your actual initialization stuff } 

    L’ho trovato particolarmente utile quando si eseguono file html con più “pagine” JQM. Ho impostato il mio in modo che il codice di inizializzazione effettivo per l’intero shebang si trovi nella mia pagina principale (del file) e quindi tutte le altre pagine secondarie abbiano un gestore di pagecreate che verifica se il codice di inizializzazione è stato triggersto e in caso contrario a $ .mobile.changePage (“# mainpage”). Funziona abbastanza bene.

    Come accennato, l’evento pageinit funziona. Tuttavia, se si ha il caso di una situazione di pagina multi-fisica (es: navigando da index.html a https://stackoverflow.com/questions/5622581/jquery-mobile-document-ready-equivalent/mypage.html), la funzione che viene eseguita è sul genitore.

    Qualsiasi logica nel pageinit dovrebbe essere qualcosa che appartiene al genitore, non al collegamento che viene caricato. Non è ansible chiamare una funzione sulla pagina alla quale si sta navigando perché la navigazione viene gestita tramite una callback ajax in JQM e gli elementi nella pagina figlio non rientrano nell’ambito.

    In questo caso particolare, potresti usare l’attributo data-ajax = “false”:

     My Page 

    In questo modo si rimuoverà la navigazione ajax, si ricaricherà una pagina intera, che a sua volta genererà una funzione $ (documento) .ready nella pagina che si sta caricando.