css is not working on dynamicaly loaded header file in jquery mobile

问题

i'm working on jquery mobile single page application so all my page are in index.php with different id's.my problem is that when i tried to make a single header to all pages then on adding that header file into all pages the css of header is not working. i have used that header in my first page in index.html thats working fine but when i called it from outside its not working properly.

Here is my Header file namd as appheader.html:

<div data-role="header" data-theme="p" data-position="fixed">
        <h1></h1>
        <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-role="button">Menu</a>
    </div>

<a data-theme="d" data-corners="false" data-role="button" href="#"> <img src="images/pearl-logo.png" alt="rss" style="display: block; margin: 1.5em auto;"></a>

<div data-role="panel" id="left-panel"  data-position="left" data-display="push" data-dismissible="true" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="docs" class="jqm-list">
            <li data-role="list-divider">LINKS</li>
            <li><a href="#home">Home</a></li>
            <li><a href="#20years">20 Years</a></li>
            <li><a href="#courses">Courses</a></li>
            <li><a href="#events">Fun @ Pearl</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#noida">Noida</a></li>
            <li><a href="#jaipur">Jaipur</a></li>
            <li><a href="#delhi">Delhi</a></li>
            <li><img src="images/pearl-logo.png"></li>
</ul>       
</div>

Here is jquery to add this page in my index.html having differnt pages combined with id's:

<script>
$(document).ready(function(e) {

        $('[data-role=page]').one('pagebeforeshow', function (event, ui) {
       $("#" + event.target.id).find("[data-role=appheader]").load("appheader.html", function(){
         //$("#" + event.target.id).find("[data-role=panel]").trigger("pagecreate");
         // refresh the page again
        //   alert('ok');
         $("#" + event.target.id).trigger("create"); 
           });
        }); 

});

</script>

Here is how i call it in my all pages inside index.html:

<div data-role="page" id="20years" data-title="20years" data-url="20years"> 
<div data-role="appheader"></div>
  <div data-role="content">
</div>
</div>

The slider working fine when used in index.html but when called as a seperate file its not woking.

another qustion is how can i make this header panel swipe as my all pages having different id's.i just make it work on one of my page having id home :

<script type="text/javascript">
$( document ).on( "pageinit", "#home", function() {
    $( document ).on( "swipeleft swiperight", "#home", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

</script>

how can i call my another pages in this jquery.