1 つの html ファイルに複数のページがあります。2 番目の data-role="page" に pageinit イベント ハンドラを実装しようとしています。そのため、特定の data-role="page" 内で pageinit を宣言しました。
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
私が期待したのは、このページにアクセスするたびに初期化されることでした. しかし、最初に開いたときだけ正しく動作します。1回おきに、以前に実行されたコードの出力が表示されます。
どうすればいいのか教えてください。