Sử dụng JQuery bình thường trong Dự án Phonegap (với JQuery Mobile)

Tôi đang xây dựng một ứng dụng sử dụng Cordova/PhoneGap và JQuery Mobile.Sử dụng JQuery bình thường trong Dự án Phonegap (với JQuery Mobile)

Tôi muốn sử dụng JQuery trong ứng dụng, nhưng tôi không thể làm cho nó hoạt động - không có gì xảy ra, ngay cả với mã đơn giản.

Tôi tin rằng tôi đã tiêu đề đặt đúng:

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

Như tôi đã có được các tiêu đề kiểu JQuery Mobile và trở lại nút, vv

Nhưng khi tôi thử một cái gì đó đơn giản như:

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

Trong tệp myscripts.js tôi không nhận được gì. Tôi có cần kích hoạt JQuery theo cách khác không? Ai có thể chỉ cho tôi đi đúng hướng?

EDIT:

tôi thấy this đó nêu đặt nó trong div. Điều này thực sự hiệu quả đối với tôi, ví dụ:

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

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

Nhưng chắc chắn có cách nào tốt hơn? Có phải là một cách để có những kịch bản tất cả trong đó tập tin bên ngoài riêng?

PS: HTML của tôi là:

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

Nguồn

2013-05-15 MeltingDog

Để hiểu một vấn đề bạn phải hiểu như thế nào jQuery Mobile hoạt động. Nó sử dụng ajax để tải các trang khác.

Trang đầu tiên được tải bình thường. HEAD và BODY của nó được tải vào DOM, và chúng ở đó để chờ đợi nội dung khác. Khi trang thứ hai được tải, chỉ nội dung BODY của nó được tải vào DOM.

Vì vậy, nếu bạn muốn có tệp js riêng biệt cho mỗi trang bạn cần để khởi tạo chúng từ BODY vì HEAD sẽ bị loại bỏ.

Như thế này:

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

Cùng một điều đi cho LINK của bạn và các thẻ STYLE.

Nếu bạn muốn tìm hiểu thêm đọc bài viết khác của tôi với các ví dụ liên quan đến chủ đề này: Why I have to put all the script to index.html in jquery mobile

điều khác, khi làm việc với jQuery Mobile, không bao giờ sử dụng loại khởi tạo:

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

Bạn cũng không nên sử dụng tài liệu jQuery cổ điển đã sẵn sàng. Bot của chúng thường sẽ kích hoạt trước khi trang được tải thành công vào DOM. Đó là lý do tại sao jQuery Mobile có số lượng trang. Và bạn đã đúng với việc sử dụng sự kiện pageinit nhưng bạn đã làm nó một cách sai lầm.jQuery Mobile trang sự kiện cần được binded như thế này:

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

Nếu bạn muốn tìm hiểu thêm đọc câu trả lời khác của tôi liên quan đến tài liệu sẵn sàng vs trang sự kiện khác biệt: jQuery Mobile: document ready vs page events

Nguồn

2013-05-15 07:20:09 Gajotres

Ah! Điều đó có ý nghĩa. Vì vậy, tôi sẽ được ngay trong đoán nếu tôi đặt liên kết đến tất cả các kịch bản bên ngoài của tôi trong tiêu đề của trang chỉ mục tất cả sẽ là tốt? – MeltingDog

Bạn đúng, đó là cách tiếp cận tốt nhất, từ quan điểm thực tế và lý tưởng. – Gajotres

Sử dụng JQuery bình thường trong Dự án Phonegap (với JQuery Mobile)

Trả lời

Các vấn đề liên quan