title: Touchstart and touchend not working on iOS using jquery mobile and cordova
body: <p>In a previous project I had no issue with the below code for using the touchstart and touchend events to modify the css of a button:</p>
  
  <pre><code>&lt;script&gt;
  
  $('input[type="button"]').on('touchstart', function(e){
  $(this).css('background-color','#49D623');
                                         });
  
  $('input[type="button"]').on('touchend', function(e){
                $(this).css('background-color','');
                });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This was in an iOS cordova project using version 2.9.0</p>
  
  <p>Since I have upgraded to the cordova 3.2 and am using jquery mobile 1.4.0 with jquery 1.10.2 and the same above code no longer works. </p>
  
  <p>I have tried <code>.on(touchstart</code> and <code>.bind(touchstart</code> and <code>.live(touchstart</code> worked with jquery 1.8 but is deprecated in 1.9. I have also tried using the id of the button, but that does not work either.</p>
  
  <p>I know that the touchstart is being recognized as I have tested it to fire off other functions and it works like a charm, just not for this.</p>
  
  <p>This is how the button appears in my html:</p>
  
  <pre><code>&lt;input type="button" id="submit" data-role="none"&gt;
  </code></pre>
  
  <p>The css of the relevant button:</p>
  
  <pre><code>input[type="button"] {
  
  -webkit-appearance: none;
  border-radius: 0px;
  width: 92%;
  margin-top: 3%;
  margin-left: 5%;
  background-color: rgba(23,24,54,1.00);
  padding: 10px;
  border-width: 1px;
  border-color:rgba(88,88,88,1.00);
  font-size: 1em;
  color: #FFFFFF;
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  background-image: url(../img/padlock2.png);
  background-size: 20px;
  background-repeat:no-repeat;
  background-position: 50% 50%;
  
      }
  </code></pre>
  
  <p>The below are referenced in the head of my html file:</p>
  
  <pre><code>&lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.mobile-1.4.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="cordova_plugins.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="css/jquerymobile1.4rc1.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/login.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/globalstyles.css"&gt;
  </code></pre>
  
  <p>What am I missing here? </p>