如何在Pageload期间调用JavaScript函数？

Question

I have a Html page contains several pages whose data-role = page as page1,page2 etc. I am trying to call a JS method during pageload of page1 using the following code

$("#page1").on("load",function () {
  alert("hi")
  $.ajax({
          type: "GET",
          url: "",
          data: "{}",
          contentType: "application/json",
          dataType:"json", 
          success:  function (msg) {
                                    var BPRList = '';
                                    $.each(msg, function(i,v){  
                                      BPRList += '<li onClick="GetBprDetails('+ v.BPRNo +')"><a href="#bprPage" data-transition="slide"><p class="title">' + v.BPRNo + '</p><p class="bodyEle">' + v.BPR_Product +'</p><p class="bodyEle">' + v.BPR_Details+ '</p><br/><p class="bodyEle">' + v.BPR_Status + ':</p></a></li>'     
                                                             })         
                                   $("#BPRListTable").html(BPRList)
                                   $('[data-role=listview]').listview('refresh');
                                   },
           error:    function () {
                                   alert("BPR List Error");
                                 }
        }); });

During the execution of above function I am unable to get the output during the formload where as if I call the above method as button click event am able to get the output. What might be the mistake made in above code.. I am more worried in following code.

$("#page1").on("load",function () {
 --statements
})

Answer 1

 $(window).load(function () {
   alert("hi")
 });

If you want the results on page load,then try this instead.Write this code outside $(document).ready(function(){});

Answer 2

Try to put 'page:load' instead of 'load' it might work better :

$("#page1").on("page:load",function () {
    - - - - 
    - - - -
    - - - - 
});

Answer 3

Found solution Myself

 $(document).ready(function(){
 $(document).on('pagebeforeshow','#page1',function () {
                                                           --statements
                                                          }); });

Answer 4

i think using pageinit would be ok

$(document).on('pageinit', '#page1', function() {...})

In this manner, you avoid using document.ready, which is also not recommended by jquery mobile.