1

我正在使用 jquery JQuery 并希望在页面加载时隐藏 div。为此，我使用以下 javascript（在页面中）

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

加载页面时，有时会隐藏 div 和按钮，有时则不会。我似乎看不到任何决定它们何时隐藏/不隐藏的一致性。当我使用标准链接的 JQM ajaxy 加载导航到页面以及刷新页面时，会发生这种情况。我正在使用 Chrome（最新）。关于这里可能出了什么问题的任何想法？

编辑 1

根据请求，这是我正在使用的 html（其中还包括在 pageshow 上的 @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

4

尝试以下操作：

<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();                 
 });

干杯，

于 2013-08-18T05:04:37.300 回答
0

您确实应该在 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>
于 2013-08-18T00:09:00.767 回答