jQuery MobileでDOMキャッシュを消すに消せないケース。

はじめに

 jQuery Mobile使用時、以下のサイトで説明されているテクニックを使ってDOMキャッシュを消すことがあるかと思います。


 しかし、いわゆるマルチページ構成の時は、このテクニックを使うとうまく画面遷移が出来なくなることに気づきました。
 マルチページ構成は面倒で泣ける。

環境

事象

 以下のようなHTMLファイルが存在したとします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../js/jquery/jquery.mobile-1.3.2.min.css">
<script src="../../js/jquery/jquery.js"></script>
<script src="../../js/jquery/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on('pagehide', function(event, ui) {
	var page = $(event.target);
	page.remove();
});
</script>
<title>Insert title here</title>
</head>
<body>
<div data-role="page"  id="page01">
    <div data-role="header" data-theme="b">
    <h2>multi01</h2>
    </div>
    <div data-role="content"  data-theme="b">
        <!--利用者がクリックするリンクその1-->
        <a href="#page02">multi02へ</a><br>
    </div>
    <div data-role="footer"  data-theme="b">
    </div>
</div>
<div data-role="page"  id="page02">
    <div data-role="header" data-theme="b">
    <h2>multi02</h2>
    </div>
    <div data-role="content"  data-theme="b">
        <!--利用者がクリックするリンクその2-->
        <a href="#page01">multi01へ</a><br>
    </div>
    <div data-role="footer"  data-theme="b">
    </div>
</div>
</body>
</html>

 そうすると画面遷移を繰り返すうちに、以下のように途中で画面遷移出来なくなるのです。

さいごに

 「id="page01"」は複数回表示しても平気というのが、私にはやや腑に落ちないです。
 とはいえ、あんまり考えても仕方ないので、気にしないことにします。