title: deviceReady not working in PhoneGap application, how to?
body: <p>I have a simple PhoneGap application as fallows:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;PhoneGap powered App&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" /&gt;
          &lt;script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript" charset="utf-8"&gt;
  
          document.addEventListener("deviceready", onDeviceReady, true); 
          function onDeviceReady() {
              alert ('123');
          }
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body onload="onDeviceReady()"&gt;
          &lt;div data-role="page"&gt;
  
              &lt;div data-role="header"&gt;
                  &lt;h1&gt;title&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  
              &lt;div data-role="content"&gt;   
                  &lt;h2&gt;Begin by inserting your credentials.&lt;/h2&gt;
                  ...
              &lt;/div&gt;&lt;!-- /content --&gt;
  
          &lt;/div&gt;&lt;!-- /page --&gt;
  
          &lt;script type="text/javascript" charset="utf-8"&gt;
              $(document).ready(function () {
  
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What happens here is that the alert <code>alert ('123');</code> never gets fired. But if I take out the other JavaScript code and leave only the alert it is fired.</p>
  
  <p>Also if I use <code>$(document).ready(function () { alert ('123'); }</code> I get the alert.</p>
  
  <p>What is happening here, why the <code>deviceready</code> is not getting fired?</p>
  
  <p>Any ideas?</p>