Aquí están las bibliotecas principales de HTML

 <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-2.2.4.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script> <script type="text/javascript" src="js/app.js"></script>

Y el código del cuerpo HTML se ve así

 <div data-role="header" data-theme="a" data-position="fixed"> <h1></h1> <div data-role="navbar"> <ul> <li><a href="#one" class="ui-btn-active" data-icon="home">Home</a></li> <li><a href="#two" data-icon="info">About Us</a></li> </ul> </div> </div> <div data-role="page" id="one" data-title="Home" data-position="fixed"> <div role="main" class="ui-content"> <p>Hello World!</p> </div> </div> <div data-role="page" id="two" data-title="About Us" data-position="fixed"> <div role="main" class="ui-content"> <p>@2021/2022 some text</p> </div> </div>

Código JS Traté de cambiar el título del encabezado h1 pero no funciona correctamente

 $(document).ready(function () { $("[data-role=header]").toolbar(); $("[data-role=header]").navbar(); $(document).on("pagecontainerchange", function () { let title = $(".ui-page-active").attr("data-title"); //get title of active page $("[data-role=header] h1").text(title); });

});

Espero solucionar este problema Gracias :)