0

JQuery モバイルでナビゲートするときに、入力から一部の値を取得するのに問題があります。ページを最初に開くと、すべてが期待どおりに機能します。ただし、移動してからページに戻ると、入力の値がフィールドの実際の値に対応しなくなります。html は次のとおりです。

<!doctype html>
    <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <link rel="stylesheet"  href="/static/jquery-ui-1.10.3.custom.min.css">
        <link rel="stylesheet"  href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">

        <script src="/static/jquery-1.9.1.min.js"></script>
        <script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>

      <!-- CSS: implied media="all" -->
    </head>


    <body>
        <div data-role="page" id = "main-page">

            <div data-role="header" style="overflow:hidden;">
            </div>

            <div id = "home" data-role="content">
                <input type = "text" name = "input_a" id = "input_a">

                <select id = "select_a" name = "select_a">
                    <option value = "a">A</option>
                    <option value = "b">B</option>
                    <option value = "c">C</option>
                </select>
            </div>

        </div>

        <script type="text/javascript">
            function set_condition()
            {
                var the_variable = "A";
                var page = $('[data-role="page"]:last'); 
                if (the_variable === "A")
                {
                    page.find("#select_a[value='a']").remove();
                    page.find("[name=select_a]").selectmenu('refresh').val('b');
                }
                console.log($('#select_a').val());
            }

            $(document).off('pageshow').on('pageshow', '#main-page', function ()
            {
                set_condition();
             });
        </script>
    </body>
</html>

たとえば、最初にページを開いてオプション B を選択し、Chrome コンソール (および JavaScript) で次のように入力します。

$('#select_a).val()

これは「b」を返します。次に、サイトの残りの部分をナビゲートしてから同じページに戻り、オプションをオプション C に変更して同じコマンドを入力すると、「b」が返されます。テキスト入力でも同じ問題が見られます。つまり、入力が空白のままの場合 - ナビゲートした後、値は返されません。同様に、空白をナビゲートするときに入力フィールドに数字が残っている場合、入力フィールドは空ですが、値が返されます...

したがって、これらの入力の値はナビゲーション後も保持され、選択の場合に値が変更されたように見えても変更されません。どうしてこれなの？

4

1 に答える 1

0

< head> セクション内で、次の操作を行います。

<script>
      $(document).on('pagehide', function(e){
           $(e.target).remove();
      });
</script>

これにより、dom 内の既存のページ キャッシュが削除されます。ご存知かもしれませんが、最初のページ (完全なリロード) は、他のページにアクセスした後も dom に残ります。

于 2013-08-18T22:35:59.323 に答える