Update jquerymobile header in multipage layout

Question

I have a multi-page layout document where each all pages have the same header:

How can I update all pages at once with a certain text after the page has loaded?

Answer 1

The below code will replace old header of all pages with a new header. All you need is to specify when you want to do this? pageshow, pagebeforeshow, pagehide, pagebeforehide, etc...

Demo

var header = '<div data-role=header><h1>new header</h1></div>';

$('[data-role=page]').each(function () {
 $(this).find('[data-role=header]').replaceWith(header);
 $('[data-role=page]').trigger('pagecreate');
});