1

jquery JQuery を使用しており、ページの読み込み時に div を非表示にしたいと考えています。これを行うには、次のjavascriptを使用しています(ページ内)

$( document ).ready(function() {
    $('#some_div').hide();
    $('#some_btn').closest('.ui-btn').hide();
});

ページが読み込まれると、div とボタンが非表示になる場合と非表示になる場合があります。それらが隠されている/されていないときを決定する一貫性がないようです。これは、標準リンクの JQM ajaxy ロードを使用してページに移動したとき、およびページを更新したときに発生します。Chrome（最新）を使用しています。ここで何がうまくいかないのかについてのアイデアはありますか?

編集 1

リクエストに応じて、私が使用しているhtmlは次のとおりです（ページショーでの@Omarの提案も含まれています）

<!doctype html>
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"  > <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"  > <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"  > <![endif]-->
    <!--[if gt IE 8]> <html class="no-js" lang="en"  > <![endif]-->


    <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 data-role="content">
                <div id = "some_div">
                    Test div
                </div>
                <button id = "some_btn">Test button</button>
            </div>
        </div>

    <script type="text/javascript">
        function hide_things()
        {
            $('#some_div').hide();
            $('#some_btn').closest('.ui-btn').hide();
        }

        $(document).on('pageshow', '#main-page', function () 
        { 
            hide_things();
         });


        $( document ).ready(function() {
            hide_things();
        });

    </script>
    </body>
</html>
4

2 に答える 2

0

あなたは確かにJQMでpageshowイベントを使用する必要があります.

コードは次のとおりです。

<body> 
    <div data-role="page" id = "main-page">
            <div data-role="header" style="overflow:hidden;">
            </div>
            <div data-role="content">
                <div id = "some_div">
                    Test div
                </div>
                <button id = "some_btn">Test button</button>
            </div>
        </div>

        <script type="text/javascript">
        function hide_things()
        {
            $('#some_div').hide();
            $('#some_btn').closest('.ui-btn').hide();
        }

        $(document).on('pageshow', '#main-page', function () 
        { 
            alert("About to hide your stuff!");
            hide_things();
         });
    </script>
</body>
于 2013-08-18T00:09:00.767 に答える