まず、jQuery Mobileで$(function()または$(document).ready()を使用しないでください。これは、jQMがそのように機能するように構築されていないためです。代わりに、https ://stackoverflow.com/に記載されているページイベントを使用する必要があります。 a /14010308/1848600または次のようなmobileinitイベント:
$(document).on("pageinit", function () {
});
または、アプリの実行時に1回だけ実行する場合は、mobileinit:
$(document).on("mobileinit", function () {
});
理由はトップリンクに記載されています。また、これについて詳しくは、jQMの公式ドキュメントをご覧ください:http://jquerymobile.com/test/docs/api/events.html
ここで、jQMでページのスタイルを変更する場合は、.trigger('pagecreate')関数を使用する必要があります。
たとえば、IDインデックスを持つjQMページがあり、これが生成されたレイアウトであるとします。
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
jQMにスタイルを強制するには、次のようなものを使用する必要があります。
$('#index').live('pagebeforeshow',function(e,data){
$('#index').trigger('pagecreate');
});
または、すべてのjQMページに適用する場合は、次のように使用します。
$('[data-role="page"]').live('pagebeforeshow',function(e,data){
$(this).trigger('pagecreate');
});