How to use pageinit for multiple data-role=page in one html file

Question

I have multiple pages in my one html file. I trying to implement the pageinit event handler on the second data-role="page". So I declared pageinit inside it's specific data-role="page".

 <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>

What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.

Please help me how to go about it.

Answer 1

Pageinit should run only once, it was made to be just like document ready.

If you want your code to run every time page is visited then use pageshow or pagebeforeshow.

Read more about it here.