Home/ Questions/Q 9202063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:10:09+00:00

I am creating a JQM site with multiple pages, using hashtag. e.g. index.html#a On

  • 0

I am creating a JQM site with multiple pages, using hashtag. e.g. index.html#a On one of the page I need to initialize a map, say index.html#map. But it occurred to me that no matter where I place the map initialization script, the script would still be executed when the index.html first load, which I want to avoid.

Although I may associate the map script with some buttons, I also want to be able to load the map when someone load index.html#map directly.

So it comes down to how can I associate JavaScript to a subpage (page with hashtag)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I hope all of that pages are part of a single HTML file. If I am correct you don’t need to use this syntax:

    index.html#map

    this one will be enough:

    #map

    Lets say this is your HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

    Then to associate a javascript to a certain page use this syntax:

    $(document).on('pagebeforeshow', '#index', function(){       
    alert('Index page');
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('Second page');
});

    Here’s a working jsFiddle EXAMPLE.

    Also take a look at my personal blog ARTICLE, it will help you to deal with jQuery Mobile page events. Or take a look at my other ANSWER.

    • 0