モバイルフレームワークのjQuery mobileを使ってると、scriptタグに書いたJavaScriptがなぜか2回実行されてしまって、かなりはまりました。
こんなコードで
<html>
<head>
:
:
<script src="jquery-mobile.js"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
alert('hoge');
</script>
これだと、最後の行のscriptタグが2回実行されて、hogeというアラートが2回表示されてしまいました。これが何故2回実行されてしまうのかが、まったくわからずに半日くらいはまってましたが、リファレンス読んだら解決しました。
ドキュメント読め俺…
で、解決策はというと
<body>
<div data-role="page">
</div>
</body>
という風に、 data-role 属性に page という値を指定してあげると解決しました。
jQuery mobileはページ間移動にはAjaxを使い、そのレスポンスをbodyに挿入して現在のページと差し替えます。
Ajaxのレスポンスの中に data-role="page" という属性があると、そのタグに囲まれた部分だけを挿入する、という仕組みのようです。
リファレンスを読む限りはこの属性値は通常、ページ毎に配置するように書かれています。
