jquery mobileを使っていたら次のページが表示されない

スマホ用サイトを作っててjquery mobileを使ってたら、
次のページに遷移したら真っ白で表示されなかった時の対応です。

まず普通に開発してたらこんな感じの記載をするかと思います。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

そうすると、最初のページはちゃんと表示されるけれども、
次のページに遷移すると真っ白になりました。
どうやらjquery mobileがajaxで遷移を制御しているのと、
次のページをキャッシュしてそうなあたりが原因なようです。
ということで、以下の記述を入れるとよさそうです。

<script>
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>

これをjquery mobileのjs読み込みの前に入れます。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

表示されなかった現象は解決して、ちゃんと遷移できるようになりました。


参考URL
http://blog.ym405nm.info/archives/528