无法在 jQuery Mobile 应用程序中隐藏/显示元素答案

【问题标题】：Cannot hide/show elements in jQuery Mobile application无法在 jQuery Mobile 应用程序中隐藏/显示元素
【发布时间】：2012-11-04 13:39:01
【问题描述】：

我在 jQuery Mobile 中有一个应用程序。每次显示页面时，都必须执行一些 JavaScript 来隐藏/显示某些元素（取决于会话状态）。

我在这方面花了很多时间，但无法弄清楚为什么 JavaScript 没有像预期的那样隐藏元素，它有时会，有时不会。好像有点随意。 DOM 实际上看起来是一致的。应该隐藏的元素有display: none，可见的有display: block，但是它与浏览器中可以看到的不匹配。

我设法将问题简化为一个非常简单的案例。它几乎是我添加的 JavaScript 的基本样板模板：

page1.html

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script src="test.js"></script>
    </head> 
<body> 

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page Title</h1>
        <div id="el1">ELEMENT 1</div>
        <div id="el2">ELEMENT 2</div>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
        <a href="page2.html">PAGE 2</a>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

page2.html

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script src="test.js"></script>
    </head> 
<body> 

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Title</h1>
        <div id="el1">ELEMENT 1</div>
        <div id="el2">ELEMENT 2</div>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>
        <a href="page1.html">PAGE 1</a> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

test.js

$(document).bind("pagechange", function(event, data) {
    console.info('Changed to page: ' + data.toPage.attr('id'));
    $('#el1').hide();
    $('#el2').show();
});

您可以通过将这三个文件放在本地服务器上轻松地对其进行测试。 page1.html 和 page2.html 几乎是相同的页面（仅用于测试），test.js 只是隐藏 #el1 并显示 #el2。当页面更改时，此 JavaScript 始终成功执行（控制台语句始终显示），但 #el1 有时隐藏，有时不隐藏，但应始终隐藏。

再一次，最让我困惑的是，如果我直接查看 DOM（在 Chrome 控制台中），一切似乎都是正确的。 CSS 显然是 display: none，但该元素仍然可见。

知道是什么导致了这个问题吗？

【问题讨论】：

标签： css jquery-mobile hide element show

【解决方案1】：

您可以尝试几件事。

使用on 而不是bind。也许您正在绑定到文档并且文档正在更改，失去绑定。使用on应该可以解决这个问题。
直接在页面上使用on：

$('#page1').on('pagechange', function() {});

【讨论】：