Question

I have an index.html file which looks like this (the rest is omitted),

<ul data-role="listview" data-theme="g">
    <li><a href="sync.html">Sync</a></li>
    <li><a href="list.html">List</a></li>
    <li><a href="">Add</a></li>
</ul>

So if I click on the list item called ‘List’ it takes me to list.html.

Inside list.html it includes this,

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() 
    {
        createDatabase(readFromDatabase);
    });

</script>

$(document).ready does not fire in this circumstance when I am redirected to list.html.

If I refresh index.html it then fires. As you can guess I would like it to fire every time. What is happening?

I am using jquery, jquerymobile, and also phonegap.

Answer 1

This is because, with jQuery Mobile, you should use the pageinit event instead of $(document).ready(). It is explained in the event section of the jQuery Mobile Documentation (http://jquerymobile.com/demos/1.0/docs/api/events.html).