During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button:
<script>
$('input[type="button"]').on('touchstart', function(e){
$(this).css('background-color','#49D623');
});
$('input[type="button"]').on('touchend', function(e){
$(this).css('background-color','');
});
</script>
This was implemented in an iOS Cordova project utilizing version 2.9.0.
After upgrading to Cordova 3.2 and incorporating jQuery Mobile 1.4.0 with jQuery 1.10.2, the above code snippet ceased functioning as expected.
I experimented with .on(touchstart, .bind(touchstart), and .live(touchstart). While these worked with jQuery 1.8, they are deprecated in version 1.9. Additionally, attempting to target the button by its ID proved unsuccessful.
The touchstart event is being detected, as verified by successfully triggering other functions. However, it does not respond appropriately for this particular scenario.
Below is how the button element is structured within my HTML:
<input type="button" id="submit" data-role="none">
The corresponding CSS for the button is as follows:
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%;
}
The following scripts are included in the head section of my HTML file:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquerymobile1.4rc1.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/globalstyles.css">
What could be causing the issue here?