Używanie normalnego JQuery w projekcie Phonegap (z JQuery Mobile)

Buduję aplikację korzystającą z Cordova/PhoneGap i JQuery Mobile.Używanie normalnego JQuery w projekcie Phonegap (z JQuery Mobile)

Chcę używać JQuery w aplikacji, ale nie mogę jej uruchomić - nic się nie dzieje, nawet z prostym kodem.

wierzę, że nagłówki ustawione prawidłowo:

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

Jak uzyskać nagłówki w stylu JQuery Telefony i plecy guziki itp

Ale gdy próbuję coś prostego, takich jak:

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

W pliku myscripts.js nic nie dostaję. Czy muszę uruchamiać JQuery w inny sposób? Czy ktoś może wskazać mi właściwy kierunek?

EDIT:

znalazłem this którym wspomniany umieszczenie go wewnątrz div. To faktycznie działało dla mnie, np.

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

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

Ale na pewno jest lepszy sposób? Musi istnieć sposób, aby te skrypty były w swoim zewnętrznym pliku?

PS: Moje HTML jest:

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

Źródło

2013-05-15 MeltingDog

Aby zrozumieć problem, musisz zrozumieć, jak działa jQuery komórkowy. Używa ajax do ładowania innych stron.

Pierwsza strona jest ładowana normalnie. Jego HEAD i BODY są ładowane do DOM i czekają na inne treści. Po załadowaniu drugiej strony, tylko jej treść BODY jest ładowana do DOM.

Jeśli chcesz oddzielić pliki js dla każdej strony, musisz zainicjować je z BODY, ponieważ HEAD zostanie odrzucony.

Jak to:

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

samo odnosi się do łącza i tagów stylu.

Jeśli chcesz dowiedzieć się więcej przeczytaj mój inny artykuł z przykładami dotyczącymi tego tematu: Why I have to put all the script to index.html in jquery mobile

Inna sprawa, gdy pracuje z jQuery Mobile, nigdy nie używać tego rodzaju inicjalizacji:

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

Nie należy również używać klasycznego dokumentu jQuery. Bot z nich zwykle uruchamia się, zanim strona zostanie pomyślnie załadowana do DOM. Właśnie dlatego jQuery Mobile ma stronę evenets. Miałeś rację, używając eventu pageinit, ale zrobiłeś to w niewłaściwy sposób.jQuery Komórka strona wydarzenie powinno być zbindowanych tak:

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

Jeśli chcesz dowiedzieć się więcej czytaj inną moją odpowiedź dotyczącą dokumentu gotowego vs różnicy Wydarzenia Strona: jQuery Mobile: document ready vs page events

Źródło

2013-05-15 07:20:09 Gajotres

Ah! To ma sens. Czy miałbym rację, zgadując, czy umieszczę linki do wszystkich zewnętrznych skryptów w nagłówku strony indeksu, wszystko byłoby dobrze? – MeltingDog

Masz rację, to najlepsze podejście, z praktycznego i estetycznego punktu widzenia. – Gajotres

Używanie normalnego JQuery w projekcie Phonegap (z JQuery Mobile)

Odpowiedz

Powiązane problemy