Hi friends I am new in jQuery mobile and trying to learns things by creating a website using jquery mobile. The problem is I used data-role="panel" to show navigation on my page its working fine but when i jump to another page which is in same HTML file its stop working I dont know what is the matter for crack this issue need your help. You can check fiddle here. On home page panel work fine but when i click on about us page its jump there but panel stops working
Please help me guys .. Thanks in advance :)
If you want to access the same panel from any pages, you have to place panel div outside any data-role="page", and then you have to initialize it manually. This is called an external panel.
<body>
<div data-role="panel" id="foo" data-theme="a">
<!-- contents -->
</div>
<!-- pages here -->
</body>
Note that an external panel doesn't inherit theme automatically, thus, you need to add data-theme attribute to it.
The .enhanceWithin() function is to enhance all widgets inside the panel. They aren't auto-initialized, so they need to be initialized.
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
Place that code in head after JQM library.
来源：https://stackoverflow.com/questions/21857208/panel-not-working-in-all-pages-using-jquery-mobile