When you load the first page of a jQuery Mobile based site, then click a link or submit a form, the jQuery Mobile uses Ajax to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.
To remedy this, jQuery Mobile automatically parses the title of the page pulled via Ajax and changes the title attribute of the parent document to match.
On multi-page documents, we follow a similiar convention, but since all the page share a common title, we have a data-title attribute that can be added each page container within a multi-page template to manually define a title. The title of the HTML docuemnt will be automatically updated to match the data-title of the page currently in view.
<div data-role="page" id="foo" data-title="Page Foo">
</div><!-- /page -->