jQuery mobile $(document).ready equivalent_问答_开发者

in ajax navigation pages, the classic "document ready" form for performing initialization javascript simply doesn't fire.

What's the right way to execute some code in an ajax loaded page?

(I mean, not my ajax... it's the jquery mobile page navigation开发者_Python百科 system which brings me to that page)

Ok, I did suspect something like that... thanks a lot =) But... it still doesn't work, here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mypage</title>

    <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
    <script type="text/javascript">
        $('div').live('pageshow',function(event, ui){
          alert('ciao');
        });
    </script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">
            <h1>Shopping Cart</h1>
        </div>

        <div data-role="content"> asd


        </div>

    </div>

</body>

Do I need to specify the div id?

I spent some time on researching the same since JQM docs are not very detailed at this point. Solution below works fine for me:

<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});
</script>

You have to implement your own checking flow in order to prevent multiple initialization since the code above will run on every page change

Bind to the "pageinit" event. From JQM docs: http://api.jquerymobile.com/pageinit/

The best equivalent of $(document).ready() is $(document).bind('pageinit')

Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

If you want the code to run on a certain page (I bet that's the case) you can use this pattern:

$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
    // code to execute on that page
    //$(this) works as expected - refers the page
});

Events you can use:

pagebeforeshow starts just before transition
pageshow starts right after transition
pagecreate starts only the first time page is loaded

All the pageshow and pagebefore show events are called each time that it's displayed. If you want something that happens the first time, you can do something like this:

  $('#pageelementid').live("pagecreate", pageInitializationHandler);

Then in later on in your code:

  function pageInitializationHandler(event) {
      //possibly optional based on what exactly you're doing,
      //but keep it in mind in case you need it.
      //Also, this seems to need to be an exact duplicate of the
      //way you used it with the .live() method or jQ/jQM won't unbind
      //the right thing
      $('#pageelementid').die("pagecreate", pageInitializationHandler);

      //Do your actual initialization stuff
  }

I found this particularly helpful when you're doing html files with multiple JQM "pages" in them. I set mine up so that the actual initialization code for the whole shebang is in my main page (of the file) and then all the other sub pages have a pagecreate handler that checks to see if the initialization code has fired and if not, does a $.mobile.changePage("#mainpage"). Works fairly well.

As mentioned, the pageinit event does work. However, if you had the case of a multi-physical page situation (eg: navigating from index.html to mypage.html), the function that is executed is on the parent.

Any logic in the pageinit would have to be something pertaining to the parent, not the link being loaded. You couldn't call a function on the page your navigating to because navigation is handled via an ajax callback in JQM and items on your child page would be out of scope.

In this particular case, you could use the data-ajax="false" attribute:

<a href="mypage.html" data-ajax="false">My Page</a>

Doing this will remove the ajax navigation, do a full page reload, which in turn will fire a $(document).ready function on the page you're loading.

It is relatively simple. I think I understand your problem, you want to have that event fire just once and not repeatedly right? If that is the case, do it like this

$(document).one('pageinit', function(){ // write your code here })

In that case the 'pageinit' will happen once. If you want to know more about the one() jQuery method, check here