jquery mobile urlパラメータがブラウザで更新されていませんが、「data-url」で正しく表示されていません

私が経験したことを示すために、次の例を作成しました。jquery mobile urlパラメータがブラウザで更新されていませんが、「data-url」で正しく表示されていません

ページ2aからページ2にナビゲートすると、URLは...＃page2？id = aとなります。私は戻って1ページに移動するにはボタンをクリックすると

、その後、ページ2bに移動し、URLはまだ「＃のPAGE2？ID = 」と表示されますが、<a>タグが明確である。＃「のhrefを持っていますpage2？id = b "と$(e.target).attr("data-url")が"＃page2？id = b "となり、＃page2になります。

ここで何が起こっているのですか？助けを前にありがとう。

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
      <script> 
      $("#page2").live('pageshow', function(e) { 
       alert($(e.target).attr("data-url")); 
       $("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, ""))); 
      }); 
      </script> 

    </head> 
    <body> 
     <div data-role="page" data-theme="c" id="page1"> 
     <div data-role="content"> 
      <p>Page 1</p> 
      <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a> 
      <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a> 
     </div> 
     </div> 

     <div data-role="page" data-theme="a" id="page2"> 
     <div data-role="content"> 
      <p id="page_text"></p> 
      <a href ="#page1" data-transition="flip" data-role="button">Page1</a> 
     </div> 
     </div> 

    </body> 
</html>

コードサンプルはjsfiddleでもhereです。

出典

2012-04-27 Travis Nelson

はところで、私は、Firefox、クロム、およびSafariでこれを試してみました...同じ結果と各 –

jqm.page.paramsプラグインを使用してこの問題を解決できました。this question on stackoverflowここでは、このプラグインを使用するための私のコードは次のとおりです。

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

     //Added the jqm.page.params plugin 
     <script src="https://raw.github.com/jblas/jquery-mobile-plugins/35fcf54e2af380aa0e98e9f384572b02f58a1ea1/page-params/jqm.page.params.js"></script> 
     <script> 
     $("#page2").live('pageshow', function(e) { 
      alert($(e.target).attr("data-url")+$.mobile.pageData.id); 
      //$("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, ""))); 
      $("#page_text").html("Page 2"+$.mobile.pageData.id); 

     }); 
     $(document).bind("pagebeforechange", function(event, data) { 
      $.mobile.pageData = (data && data.options && data.options.pageData) 
            ? data.options.pageData 
            : null; 
     }); 
     </script> 

    </head> 
    <body> 
     <div data-role="page" data-theme="c" id="page1"> 
     <div data-role="content"> 
      <p>Page 1</p> 
      <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a> 
      <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a> 
     </div> 
     </div> 

     <div data-role="page" data-theme="a" id="page2"> 
     <div data-role="content"> 
      <p id="page_text"></p> 
      <a href ="#page1" data-transition="flip" data-role="button">Page1</a> 
     </div> 
     </div> 

    </body> 
</html>

出典

2012-07-06 21:34:32

に私はそのライブラリが古くなっている可能性が考えて、最近Iこのようなことがまだ必要な場合は、jQM 1.4+と互換性のある新しい[プラグイン]（https://github.com/CameronAskew/jquery.mobile.paramsHandler）を作成しました –

問題は、ajaxナビゲーションで追加されたURL変数にあります。 JQMは、独自のナビゲーションで追加された変数を使用します。ドキュメントによれば、ajaxナビゲーションを失うか、変数を失うかのいずれかです。 rel = "external"でいくつかのページに分割すると、Webサイト（アプリケーションではない）でも問題が解決されます。

出典

2012-04-27 20:18:32 Cymbals

jquery mobile urlパラメータがブラウザで更新されていませんが、「data-url」で正しく表示されていません

答えて

関連する問題