Utilizzo di JQuery normale in Progetto PhoneGap (con JQuery Mobile)

Sto costruendo un'app che utilizza Cordova/PhoneGap e JQuery Mobile.Utilizzo di JQuery normale in Progetto PhoneGap (con JQuery Mobile)

Voglio usare JQuery nell'app, ma non riesco a farlo funzionare - non succede nulla, anche con un semplice codice.

credo di avere le intestazioni impostato correttamente:

<script type="text/javascript" src="cordova-2.7.0.js"></script> 
     <script type="text/javascript" src="js/jquery.min.1.9.js"></script> 
     <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script> 
     <script type="text/javascript" src="js/myscripts.js"></script> 
     <script type="text/javascript"> 
      app.initialize(); 
      </script>

Come ottengo le intestazioni stile jQuery Mobile e schiena pulsanti, ecc

Ma quando provo qualcosa di semplice come:

document.addEventListener("deviceready", function(){ 
    $('p').append("<strong>HEllO</strong>"); 
});

Nel file myscripts.js non ottengo nulla. Devo attivare JQuery in un modo diverso? Qualcuno potrebbe indicarmi la giusta direzione?

EDIT:

ho trovato this che menzionava mettendolo all'interno della div. Questo in realtà ha funzionato per me, ad esempio

<div class="normal" data-role="page" data-title="Program"> 
      <script type="text/javascript"> 
      $(".normal").on('pageinit', function() { 

      $('p').append("<strong>HEllO</strong>"); 
      }); 
      </script>

Ma sicuramente c'è un modo migliore? Deve esserci un modo per avere questi script tutti dentro il proprio file esterno?

PS: Il mio HTML è:

<body> 
     <div data-role="page" data-title="Program"> 
      <div id="programholder"> 
       <div data-role="header"> 
        <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a> 
        <h1>HEADER</h1> 
       </div><!--HEADER--> 
       <div data-role="content"> 
        <p> 
        Append here 
        </p> 
      </div><!--CONTENT--> 
      </div><!--HOLDER-->  
     </div><!--PAGE--> 
    </body>

fonte

2013-05-15 MeltingDog

di capire un problema è necessario capire come funziona jQuery Mobile. Usa ajax per caricare altre pagine.

La prima pagina viene caricata normalmente. Il suo HEAD e BODY è caricato nel DOM, e sono lì per attendere altri contenuti. Quando viene caricata la seconda pagina, solo il suo contenuto BODY viene caricato nel DOM.

Quindi, se si desidera avere file js separati per ogni pagina, è necessario inizializzarli dal BODY perché HEAD sta per essere scartato.

Ti piace questa:

<body> 
    <script> 
     // Your javascript will go here 
    </script> 
    // And rest of your HTML content 
</body>

Stessa cosa vale per il tuo link e tag di stile.

Se volete saperne di più leggere il mio altro articolo con esempi su questo tema: Why I have to put all the script to index.html in jquery mobile

Altra cosa, quando si lavora con jQuery Mobile, non utilizzare questo tipo di inizializzazione:

document.addEventListener("deviceready", function(){ 
    $('p').append("<strong>HEllO</strong>"); 
});

Né si dovrebbe usare il classico documento jQuery pronto. Di solito, il loro bot viene attivato prima che la pagina venga caricata correttamente nel DOM. Questo è il motivo per cui jQuery Mobile ha pagine di pagine. E avevi ragione nell'usare l'evento pageinit ma lo hai fatto in modo sbagliato.Pagina jQuery Mobile di evento deve essere rilegato in questo modo:

$(document).on('pageinit', ".normal",function() { 
     $('p').append("<strong>HEllO</strong>"); 
});

Se volete saperne di più leggere la mia altra risposta riguardo documento pronto vs pagina differenza eventi: jQuery Mobile: document ready vs page events

fonte

2013-05-15 07:20:09 Gajotres

Ah! Ciò ha senso. Quindi avrei ragione ad indovinare se inserissi i collegamenti a tutti i miei script esterni nell'intestazione della pagina dell'indice, tutto andrebbe bene? – MeltingDog

Hai ragione, questo è l'approccio migliore, dal punto di vista pratico ed estetico. – Gajotres

Utilizzo di JQuery normale in Progetto PhoneGap (con JQuery Mobile)

risposta

Problemi correlati