title: Using normal JQuery in Phonegap Project (with JQuery Mobile)
body: <p>I am building an app that uses Cordova/PhoneGap and JQuery Mobile.</p>
  
  <p>I want to use JQuery within the app, but I cannot get it to work - nothing happens, even with simple code.</p>
  
  <p>I believe I have the headers set correctly:</p>
  
  <pre><code>&lt;script type="text/javascript" src="cordova-2.7.0.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.min.1.9.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/myscripts.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              app.initialize();
              &lt;/script&gt;
  </code></pre>
  
  <p>As I get the JQuery Mobile style headers and back buttons etc.</p>
  
  <p>But when I try something simple like:</p>
  
  <pre><code>document.addEventListener("deviceready", function(){
      $('p').append("&lt;strong&gt;HEllO&lt;/strong&gt;");
  });
  </code></pre>
  
  <p>In the <code>myscripts.js</code> file I get nothing. Do I need to trigger the JQuery in a different way? Could anyone point me in the right direction?</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/7544023/how-to-initialize-pages-in-jquery-mobile-pageinit-not-firing">this</a> which mentioned putting it within the div. This actually worked for me, eg</p>
  
  <pre><code> &lt;div class="normal" data-role="page" data-title="Program"&gt;
            &lt;script type="text/javascript"&gt;
            $(".normal").on('pageinit', function() {
  
            $('p').append("&lt;strong&gt;HEllO&lt;/strong&gt;");
            });
            &lt;/script&gt;
  </code></pre>
  
  <p>But surely theres a better way? There has to be a way to have these scripts all in there own external file?</p>
  
  <p>PS: My HTML is:</p>
  
  <pre><code>&lt;body&gt;
        &lt;div data-role="page" data-title="Program"&gt;
            &lt;div id="programholder"&gt;
                &lt;div data-role="header"&gt;
                    &lt;a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left"&gt;Back&lt;/a&gt;
                    &lt;h1&gt;HEADER&lt;/h1&gt;
                &lt;/div&gt;&lt;!--HEADER--&gt;
                &lt;div data-role="content"&gt;
                    &lt;p&gt;
                    Append here
                    &lt;/p&gt;
               &lt;/div&gt;&lt;!--CONTENT--&gt;
            &lt;/div&gt;&lt;!--HOLDER--&gt;    
        &lt;/div&gt;&lt;!--PAGE--&gt;
      &lt;/body&gt;
  </code></pre>