jQuery Mobile - How to link a html page which has some ajax in it within another html page

I have an application developed using phoneGap and jQuery Mobile. On the first page there is a navigation bar that the user clicks to navigate to a page which also has some ajax calls to get JSON feeds from a server. I am doing the following,

<ul>
  <li><a href="sites.html" data-icon="home" class="ui-btn-active">My</a></li>
  <li><a href="profile.html" data-icon="gear">Recent</a></li>
</ul>

But the page is not loading. But if I open the page directly it work开发者_运维技巧s nicely. My ajax calls are in the document.ready() event.

What can I do for this?

I am not familiar with phone gap, but jQuery Mobile will automatically turn internal links into ajax calls. You shouldn't have to do anything with your document.ready().

jQuery Mobile Documentation - Page Links

In jQuery Mobile, the document.ready() only fires when the initial page loads. Also, because jQuery Mobile only pulls in content when it loads a fresh page, nothing in the header is executed. In order to simulate the effect of document.ready() on other pages, do the following:

$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
// Insert the calls that were in the document.ready() here.
});

jQuery Mobile Documentation - Page Scrpting