Aktualisieren Seite nach AJAX-Request in jQuery Mobile

Question

Ich habe folgende jQueryMobile Seite Anatomie an index.html:

<div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div> 

Ich bin daran interessiert, die anderen Seiten im Laden (die nicht über diese Anatomie haben) zu data-role="content" durch AJAX, um die gleiche Kopf- und Fußzeile über alle Seiten zu verwenden.

Der folgende Code funktioniert einwandfrei, aktualisiert die Elemente jedoch nicht mit jQueryMobile-Stilen.

$('div:jqmData(role="content")').load('pages/home.html'); 

Answer 1

Alles, was Sie tun müssen, ist dem jQuery-Framework sagen, die neuen Widgets zu initialisieren:

$('.ui-content').load('pages/home.html', function() { $(this).trigger('create') }); 

Auch, wenn alles, was Sie wollen, ist ein hartnäckiges Kopf-/Fußzeilen, dann sollten Sie beim Check-out nur, dass Funktion, die jQuery mobile hat: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer-persist-b.html

Hier ist eine Demo: http://jsfiddle.net/VMhz4/1/

aktualisieren

Sie können data-role="button" auf Links wie diese dynamisch hinzufügen, wenn Sie benötigen:

$('.ui-content').load('pages/home.html', function() { 

    //after the AJAX request has resolved and the HTML has been added to the DOM, this will run 

    //find all the links that were just added to the DOM and add the `data-role="button"` attribute to each, 
    //then end the current selection (returning to `$(this)`) and initialize all widgets 
    $(this).find('a').attr('data-role', 'button').end().trigger('create'); 
});