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

问题

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.

回答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.

回答2:

Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.

I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.

Document pageinit fires more than once on iOS (jQueryMobile)

来源：https://stackoverflow.com/questions/17693035/how-to-use-pageinit-for-multiple-data-role-page-in-one-html-file

标签

android

jquery

jquery-mobile

cordova

page-init