4

私が経験していることを示すために、次の例を作成しました。

ページ2aボタンを使用してページ1からページ2に移動すると、予想どおりURLは...＃page2？id=aになります。

ボタンをクリックしてページ1に戻り、ページ2bに移動すると、URLには「＃page2？id = a」と表示されますが、タグには明らかに「＃page2？id= b」<a>のhrefが含まれています。 ＃page2に到達すると、「＃page2？id= b」になります。 $(e.target).attr("data-url")

ここで何が起こっているのかアイデアはありますか？助けてくれてありがとう。

<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にもあります。

4

2 に答える 2

3

stackoverflowに関するこの質問の助けを借りて、 jqm.page.paramsプラグインを使用することで、この問題を解決することができました。このプラグインを使用するための私のコードは次のとおりです。

<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-06T21:34:32.910 に答える
0

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

于 2012-04-27T20:18:32.600 に答える