Home/ Questions/Q 8786985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:46:17+00:00

I’ve got an application in jQuery Mobile. Every time a page is shown, some

  • 0

I’ve got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).

I’ve spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn’t match what can be seen in the browser.

I managed to reduce the issue down to a very simple case. It’s pretty much the basic boilerplate template with my added 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();
});

You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.

And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.

Any idea what could be causing this issue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A couple of things you might try.

    1. Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.

    2. Use on directly on the page:

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

    • 0