Jquery Mobile "pageinit" not firing

ジオロケーションAPIをJquery Mobileで使用しようとしています。私はブラウザから直接私のページを参照するとすべてうまく動作します。Jquery Mobile "pageinit" not firing

しかし、別のページからナビゲートすると、読み込まれません。

また、「pageinit」コマンドでコード行を削除すると、同じ問題が発生しますが、エラーが発生しますが、ページをリフレッシュするとロードされます。

DOMはAJAXを使って処理される方法と関係がありますが、私はそれが必要なように動作するように思えます。私が見ていた文書の少なくとも部分 - pageinitイベントを処理する方法について

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Location</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

</head> 
<body> 
    <div data-role="page" id="geoPage"> 


     <script type="text/javascript"> 

      $("#geoPage").live("pageinit", function() { 
       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(success, error); 
       } else { 
        error('Geolocation not supported'); 
       } 
      }); 

      function success(position) { 
      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      var myOptions = { 
       zoom: 15, 
       center: latlng, 
       mapTypeControl: false, 
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var mapcanvas = $('#mapcanvas'); 
      var map = new google.maps.Map(mapcanvas[0], myOptions); 
      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title:"I am here!" 
      }); 


      //alert(latlng); 


      } 


      function error(msg) { 
       var errMsg = typeof msg == 'string' ? msg : "Geolocation failed"; 
       $('#msg').html(errMsg); 
      } 


      $("#continue7").click(function(e){ 


       $.mobile.changePage("extension.htm", { transition: "slide"}); 


      }); 
     </script> 


     <div data-role="header"> 
      <h1>My Location</h1> 
     </div> 
     <div data-role="content"> 
      <div id="msg"></div> 
      <div id="mapcanvas" style="height: 250px; width:250px;"></div> 
      <input id="continue7" type="button" value="Conintue" /> 



     </div> 
    </div> 
</body> 
</html>

出典

2012-04-23 user1289451

あなたは非常に長い時間前にリリースされたアルファ版で作業しています。依存関係を最新のjQM 1.1.0リリースとjQuery 1.6/1.7にアップデートしてください！ – amiuhle

この投稿を確認してください。それは私のために働いたhttp://stackoverflow.com/questions/15848352/phonegap-jquery-mobile-on-android-multiple-html-pages-javascript-not-working –

documentationはあなたのアプローチよりもわずかに異なっています。彼らの提案は、あなたがこのようにそれをコーディングだろうということです。

$(document).delegate("#geoPage", "pageinit", function() { 
    // Handle it 
}

マニュアルを参照して、あなたがこの方法をバインドしたい場合は、最高の場所に機能を配置しているように聞こえました。

編集：

は注目すべきは、this particular pageあなたが示されているとおりに結合（しかし、私はあなたの状況に影響を与えるべきではないと思う無名関数にeventが追加されます）について説明します。これにより、別のページから移動したときにDeveloper Tools Consoleでjavascriptエラーが発生し、そのページが「動作していない」ように見えることが考えられます。デベロッパーツールで選択していることを確認してください。

編集：

あなたのためのソリューションは、あなたのGoogleはJavaScriptのどこかdata-role='page'要素内の「を含む」をマップする含める必要があるということです。 Jquerymobileは、AJAXページの読み込みを行うたびに、それ以外のすべてを無視します。または、このページのすべてのリンクをdata-ajax="false"にすることもできます。

data-role = "page"のの中にを含めるか、すべてのページのhtmlの<head>に含めます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

本当にに元のリンクシンクを読んで聞かせてください。ベストプラクティスは、あなたがそれをすべてのページに同じ<head>要素を持っており、それを含めるのではなく、コピー＆ペーストということです。

出典

2012-04-23 13:41:26 veeTrain

あなたの助けに感謝します。あなたの提案したコードを使用して私はまったく同じ動作を取得します。しかし、私はちょうど私のjavascriptをクロムでデバッグしようとし、それはGoogleが定義されていないと言います。しかし、それは頭の中のスクリプトから定義されるべきです。私もそのスクリプトを自分のページに移動しようとしましたが、私は同じエラーを受け取ります... – user1289451

私はそれを修正しました。エラーが出たら、スクリプトがページ遷移に読み込まれていないことに気付きました。そこで、APIのインクルードをインデックスファイルに移動しました。そうすれば、DOMがロードされます。私は後でそれにアクセスできます。私はこれをやるべき方法であるかどうか確信していませんが、それは動作します。これが方法に悩まされている場合は助言してください。また、あなたが私の脳を正しい方向に回転させたので、あなたの答えを私の解決策として与えました。 – user1289451

一般的に、すべてのページに同じ ''セグメントを設定する必要があります。それは基本的にjquerymobileが想定するものです。ページのこれらのセグメントは、ユーザーが最初にアクセスするページのいずれか一度だけロードされます。したがって、ページ固有の要素があるページ（「google」など）に含まれる必要がある場合は、それを必ず 'data-role ="ページ "内に含めてください。ベストプラクティスについては、最初のドキュメントリンクを必ずお読みください。ありがとう – veeTrain

Jquery Mobile "pageinit" not firing

答えて

関連する問題