Question

I am making a book, and use jQuery to change pages etc.
At the top I have an $(document).ready(function() that does different stuff when the page is loaded.

On the GUI page I got a “change page” button, and when this is pushed, the function turnPage() is called. This method contain some code pluss this:

$.mobile.changePage("#device"+window.device, {
    transition: "slide",
    reverse: false,
    changeHash: true
});

My question is, when turnPage() is called, is also $(document).ready(function() called?
(Yes, I am new to this)

Answer 1

DOM ready event is an event that fires when the DOM is fully loaded except of images (<img>).

The event fires once for each page load. So:

• If the turn page() function makes a redirect, the answer is Yes.
• If the turn page() function only gets data with ajax request, the answer is No.

---

Important Update:
I found this in the official plugin website :

Important: Use 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.
…
…

So turn page does an ajax request, so the final answer is No.

What is the ready event:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it’s important to reference external.