jQuery Mobile - Inclure le pied de page du fichier externe

Question

Je souhaite créer un pied de page partagé (par exemple footer.html) pouvant être utilisé par toutes les pages de mon application jQuery Mobile. Cependant, je ne trouve pas de moyen pour que jQuery actualise les styles dans la barre de navigation du pied de page après avoir chargé le fichier html à partir du fichier externe. Après les pensées seraient grandement appréciées.

footer.html:

<div data-role="navbar" class="CSS" data-grid="d" id="footerNav"> 
    <ul > 
     <li ><a href="#" id="a" data-icon="custom"><div>a</div></a></li> 
     <li ><a href="#" id="b" data-icon="custom"><div>b</div></a></li> 
     <li ><a href="#" id="c" data-icon="custom"><div>c</div></a></li> 
     <li ><a href="#" id="d" data-icon="custom"><div>d</div></a></li> 
     <li ><a href="#" id="e" data-icon="custom"><div>e</div></a></li> 
    </ul> 
</div> 

Index.html:

<div data-role="page" style="position: relative" data-theme="a" id="index"> 
    <div data-role="header"> 
     <div class="homebutton" onclick="location.href='default.html'"> 
      &nbsp;</div> 
     <h1> 
      EVENT CALENDAR</h1> 
    </div> 
    <div data-role="content"> 
     <p> 
      This is a single page boilerplate template that you can copy to build you first 
      jQuery Mobile page. Each link or form from here will pull a new page in via Ajax 
      to support the animated page transitions.</p> 
    </div> 

    <div data-role="footer" class="CSO" data-position="fixed" id="footerDiv"> 

    </div> 

    <script> 
    $('#index').live('pageinit', function (event, ui) { 
     $('#footerDiv').load('Shared/Footer.html'); 
     [Some code to refresh the footer so it gets redrawn by Jquery Mobile] 
    }); 
    </script> 

Answer 1

En supposant que le reste du code est valide:

$('#footerDiv').load('Shared/Footer.html').trigger("create"); 

Answer 2

pour moi, je devais utiliser la fonction de rappel, et ajoutez-la dans mon événement pageinit:

$(document).on('pageinit', function(event){ 
    $("#footerDiv").load('_footer.html', function(){$(this).trigger("create")}); 
});