1

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

测试.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只是 hide#el1和 show #el2。当页面更改时，此 JavaScript 始终成功执行（控制台语句始终显示），但#el1有时隐藏，有时不隐藏，但应始终隐藏。

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

知道什么可能导致这个问题吗？

4

1 回答 1

0

您可以尝试几件事。

  1. 使用on而不是bind. 也许您正在绑定到文档并且文档正在更改，失去绑定。使用on应该可以摆脱这个。

  2. on直接在页面上使用：

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

于 2012-11-04T13:59:57.567 回答