Combining jQuery Mobile and MathJax on a mobile site?

There seems to be some issues when combining MathJax and jQuery Mobile on the same page. Sometimes the MathJax renders correctly and other times it does not - and this can happen to the same page.

The HTML that loads both of them looks like this:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'>
</script> 
<script type='text/javascript'
        src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js'>
</script> 
<link rel='stylesheet' type='text/css'
      href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' /> 
<script src='/beta/mathjax/MathJax.js'>
</script>

You can see an example page here: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772

Edit: It seems to be a problem with MathJax not recognizing a new page being loaded via AJAX - here is an example that doesn't seem to work: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678

Solution

Well I found a solution... and it goes something like this:

First assign unique numbers to the pages. Since these pages are generated in PHP, this can be accomplished by using uniqid().

Assign the following function the the pageshow event:

$('#page_id').live('pageshow', function(event, ui) {
    var script = document.createElement('script');
    script.type   = 'text/javascript';
    script.src    = 'path_to_mathjax/MathJax.js';
    script.onload = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
});

This loads MathJax and inserts it into the DOM - this script should be included within the page element. Also note that we mention a 'callback'. This will be called when the script loads.

This function (the callback) needs to go outside of any pages. This will prevent it from being included twice after a new page is loaded.
```
var mathjax_loaded = false;
function callback()
{
    if(mathjax_loaded)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    else
    {
        MathJax.Hub.Startup.onload();
        mathjax_loaded = true;
    }
}
```
There's a lot here. First of all, we keep track of whether this callback has been called once before. If not, we tell MathJax to parse the page as if it were invoked from the window.onload event. If this has already happened (and we're on a new page) then we simply need to have MathJax run through the new page.

I'm probably missing something and there may be a better way of doing this. But I haven't found any other way that works.