jQuery Mobile application to load an external page and run js script when a button is clicked

Question

I want my jQuery Mobile application to load an external page when a button is clicked, but i am not sure of which event to use.

<a href="html/rarely_Used_Page.html" id="my_page" 
    data-role="button" data-inline="true" 
    data-theme="c"  data-icon="search" data-transition="none">
        List Members
</a>

Source for rarely_Used_Page.html:

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

This is my rarely used page.
It is rarely used, so I don't want to include \
it in the main index.html page

</div>


// on load of rarely_Used_Page.html,  
// a script would run to perform a specific 
// task, but only for this page

<script>

$('[data-role=page #some_id]').live('pageshow', function () {
    alert("!");
    });
</script>

** edit ** Revised script. I am getting closer to answer.

Answer 1

Try using the jquery load() function.

$(document).load(function() {
     //code to perform tasks goes here
});

You can just put this at the bottom of rarely_Used_Page.html

Answer 2

Why can't the piece of code which you've written there work? The a href="x.html" is the standard way to switch to an external page.

Answer 3

If you're using Ajax, which you will be unless you explicitly ask not to, then only scripts inside the page div will fire when you load the page. So, I can see two options

Put a script inside the page div

<script>alert("!");</script>

Include the following in a script which loads with the main document

$("#some_id").live("pageshow", function() { alert("!"); });

The first option will run the code before the page shows, the second will run it after.