Question

我在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，但元素仍然可见。

知道可能导致此问题的原因是什么？

Answer 1

你可能会尝试一些事情。

使用on代替bind。也许你绑定到文档，文档正在改变，失去绑定。使用on应该能够摆脱这种情况。
直接在页面上使用on：

$（'＃page1'）。on（'pagechange'，function（）{}）;

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

1 个答案: