title: Using jQuery Mobile, onclick not triggering with PhoneGap on Android
body: <p>I'm using jquery.validate.js with a multipage jquery mobile app. I'm using onclick= to validate each page/form before moving on to the next page. This works correctly in iOS and Android when accessed in the browser. But when I package with PhoneGap, the next button in my footer is dead/does nothing. I'm guessing its an issue with the onclick. I tried a couple solutions form here:
  <a href="https://stackoverflow.com/questions/9956014/phonegap-build-jquerymobile-onclick-on-button-does-not-work">PhoneGap build + jquerymobile: onclick on button does not work</a> and here: <a href="https://forum.jquery.com/topic/jquery-mobile-on-phone-gap-for-android" rel="nofollow noreferrer">https://forum.jquery.com/topic/jquery-mobile-on-phone-gap-for-android</a> without success. A relevant sample of my html is below.</p>
  
  <p>What do I do to make those links work with Android/PhoneGap? I'd like to keep them as href's rather than buttons.</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;div id="info" data-role="page" data-theme="c"&gt;
  &lt;div data-role="content"&gt;
  
  &lt;script&gt;
      function infoval(){ 
          if (!$("#infofm").valid()) {
              alert("Please fill in all fields on this page before proceding");
          } else {
              $.mobile.changePage('#towertop', {transition: 'slidefade'});
          }
      };
      function towertopval(){ 
          if (!$("#towertopfm").valid()) {
              alert("Please select 'Yes' 'No' or 'N/A' for each item before proceding");
          } else {
              $.mobile.changePage('#towerground', {transition: 'slidefade'});
          }
      };
  &lt;/script&gt;
  
  &lt;form id="infofm" encoding="multipart/form-data" encType="multipart/form-data"&gt;
  &lt;input type="text" placeholder="Your First &amp; Last Name" class="required" name="_fid_14" id="_fid_14" /&gt;
  &lt;/form&gt;
  &lt;div data-role="footer" data-id="myfoot" data-position="fixed"&gt;&lt;div data-role="navbar"&gt;
  &lt;ul&gt;&lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog"&gt;Start Over&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="infoval();"&gt;Next Step&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div id="towertop" data-role="page" data-theme="c"&gt;
  &lt;div data-role="content"&gt;
  &lt;form id="towertopfm" encoding="multipart/form-data" encType="multipart/form-data"&gt;
  &lt;div data-role="fieldcontain"&gt;&lt;p&gt;&lt;a href="" data-reveal-id="16pop" data-animation="none"&gt;Azimuth Verification&lt;/a&gt;&lt;/p&gt;&lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;&lt;input id="_fid_16_a" type="radio" name="_fid_16" value="Yes" class="required"/&gt;&lt;label for="_fid_16_a"&gt;Yes&lt;/label&gt;&lt;input id="_fid_16_b" type="radio" name="_fid_16" value="No"/&gt;&lt;label for="_fid_16_b"&gt;No&lt;/label&gt;&lt;input id="_fid_16_c" type="radio" name="_fid_16" value="N/A"/&gt;&lt;label for="_fid_16_c"&gt;N/A&lt;/label&gt;&lt;/fieldset&gt;
  &lt;p&gt;&lt;textarea placeholder="Comments" name="_fid_17" id="_fid_17" rows="6" /&gt;&lt;/textarea&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;div data-role="footer" data-id="myfoot" data-position="fixed"&gt;&lt;div data-role="navbar"&gt;
  &lt;ul&gt;&lt;li&gt;&lt;a href="#info" data-iconpos="bottom" data-theme="a" data-transition="slidefade" data-direction="reverse" data-icon="arrow-l"&gt;Previous Step&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog"&gt;Start Over&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="towertopval();"&gt;Next Step&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready( function(){
      $("#infofm").validate({ errorPlacement: function(error, element) {} });
      $("#towertopfm").validate({ errorPlacement: function(error, element) {} });
      $("#towergroundfm").validate({ errorPlacement: function(error, element) {} });
      $("#cabaavfm").validate({ errorPlacement: function(error, element) {} });
      $("#sigemailfm").validate({ errorPlacement: function(error, element) {} });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the order of scripts in my header:</p>
  
  <pre><code>&lt;script src="jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.mobile.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="sisyphus.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.reveal.js"&gt;&lt;/script&gt;
  &lt;script src="jSignature.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="date.format.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="phonegap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>UPDATE:
  I also tried this:</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
          $('#nxt1').click(function(){
              infoval();
          });
          $('#nxt2').click(function(){
              towertopval();
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>With this:</p>
  
  <pre><code>&lt;div data-role="footer" data-id="myfoot" data-position="fixed"&gt;&lt;div data-role="navbar"&gt;
  &lt;ul&gt;&lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog"&gt;Start Over&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="" id="nxt1" data-iconpos="bottom" data-theme="a" data-icon="arrow-r"&gt;Next Step&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>With the same result - works in browser, but not after packaged with PhoneGap.</p>