Question

我正在使用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>

Answer 1

尝试以下方法：

<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>
    $(document).on('pageinit', '#main-page', function () 
     {             
        var page = $('[data-role="page"]:last'); 
        page.find('#some_div').hide();
        page.find('#some_btn').closest('.ui-btn').hide();                 
     }); 
</div>

您也可以尝试使用pageshow，但是要进行测试，请先尝试取消绑定事件： [将以上脚本替换为：]

$(document).off('pageshow').on('pageshow', '#main-page', function () 
{
    var page = $('[data-role="page"]:last'); 
    page.find('#some_div').hide();
    page.find('#some_btn').closest('.ui-btn').hide();                 
 });

干杯，

Answer 2

你确实应该在JQM中使用pageshow事件，我在这里工作：http://www.nextdesigns.ca/jqm/index.html

代码如下：

<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>

如何在JQuery mobile中隐藏div - 当前尝试偶尔会隐藏div

编辑1

2 个答案: