Q:

How to execute JavaScript after a page is transitioned with jQuery Mobile

When a page do a transition to another (and use the location.hash stuff) , this second page does not load any JavaScript. How can I execute JavaScript when a page is loaded (if this one "comes" from a transition from its parent) ?
I have page1.html, with a link to page2.html. This page2.html loads with a transition (slide effect by default).
In page2.html no JavaScript is executed. I tried with a simple
<script type="text/javascript">
alert("x");
</script>

but does not work. I tried with a lot of document.ready, bind, live, oncreate, pagecreate, and so on.

A:

You could use a callback function. After the animation call a function.
in jQuery:
$('#yourElement').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete. add your callback logic here
});

If using Webkit transitions:
$('#yourElement').addEventListener(
 'webkitTransitionEnd',
 function( event ) {
     // Animation complete. add your callback logic here
 }, false );

And if using jQuery Mobile, it appears you can use the 'pageshow' and 'pagehide' event listeners:
http://jquerymobile.com/test/docs/api/events.html
$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

$('div').live('pagehide',function(event, ui){
  alert('This page was just shown: '+ ui.nextPage);
});

A:

Basically in Jquerymobile when you do a page transition only the content inside
    <div data-role="page">
    ...
    </div> 

gets changed so effectively all your scripts and everything you have included in
    <head></head> 

tags is not getting loaded.
So to solve this you need to include your script inside the page, like below
    <div data-role="page">
    ...
    <script type="text/javascript" src="yourScript.js"></script>
    </div>

Thanks,
Dinesh Parne

A:

Also this issue seems to be highlighted here:
jquerymobile - include .js and .html
I've had success by having ALL the JavaScript located/included on the very first page, and for each linked page I have wrapped the code inside a block like this:
$('#page2').live('pageshow',function(){

   //page twos JS                  
});

$('#page3').live('pageshow',function(){

   //page threes JS                  
});

And of course each document must include the usual container with the corresponding id:
<section id="page2" data-role="page" data-theme="a"> ...

