How to execute JavaScript in page that when loaded?

Question

I use jQuery Mobile. But when I load page in another html file as a page, the javascript in that head tag won't execute. I checked the source and found that the head tag is still the original one's. So what should I do to run script when page loaded?

EDIT1:

I also tried to write js code inside body tag, but the script won't stop when leave away. I have a timer so that there'll be two timer racing.

EDIT2:

I've uploaded pages:

main.html http://pastebin.com/0Y9Xfrtw

recharge.html http://pastebin.com/j9HfUvqZ

recharge.js http://pastebin.com/K5eCwMAb

Answer 1

UPDATE #2:

• http://jsfiddle.net/QgSaw/9/

Try stopping the timer before the page transition. Since you are using multiple pages I'm not sure the timer is stopping when navigating elsewhere. Try testing the different Page Transition Events:

• http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

In the example above I used:

pagebeforehide

UPDATE:

I've tried to ad your code from PasteBin into JSFiddle

• http://jsfiddle.net/QgSaw/3/

This is working I think, as I see the timer count down on the recharge page and if it hits zero navigate back to the home page:

• http://jsfiddle.net/QgSaw/4/ (with timer js but it should be in it's own file)

I get an error on this method:

Uncaught TypeError: Object [object Object] has no method 'everyTime'

Alternative to everyTime

• jquery "everyTime" function

with jQM all JavaScript (for each page) should be in the page that's loaded first. so if you load index.html place all JavaScript in this page. To execute the JavaScript for a specific page you can use one of the Page initialization events, Docs:

• http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

JS

$('#page_id').live( 'pageshow',function(event, ui){
    alert( 'This page was just hidden: '+ ui.prevPage);
});

Example:

• http://jsfiddle.net/QgSaw/

JS

$('#home').live( 'pageshow',function(event, ui){
    alert( 'We are back home');
});

$('#page2').live( 'pageshow',function(event, ui){
    alert( 'This will only execute on Page 2');
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#page2">Page 2</a></li>
        </ul>

    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#home">Go Back Home</a></li>
        </ul>

    </div>
</div>