JQuery Mobile button click event not firing on iOS device

StackOverflow https://stackoverflow.com/questions/23537720

Question

I am trying JQuery Mobile for the first time and have not been able to trigger a response to a button being pressed on my iphone 4S which runs iOS 7.1. The click event is triggered in the browser on my computer but not on the device. I can see that this is a common issue and have tried the various proposed solutions but they dont seem to work for me. My code is very simple. The markup is 

<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<script src="javascript/idtest.js"></script>

</head>
<body>
<div data-role="page">

<div id='login'>

<center>
    <a href="#" data-role="button" id='pincodebtn'>Identify</a>
</center>

</div>

</div><!-- /page -->

</body>
</html>

And the javascript, idtest.js, is

$(document).ready(function() {

    $('#pincodebtn').css('cursor','pointer');

    $(document).on('click','#pincodebtn',function(){    
        alert('clicked');   
    })

});

As you can see, I have tried the trick of setting the cursor to pointer. I have also tried catching the 'vclick', 'touchstart', 'touchend' and 'tap' events. None of which trigger the alert on the iOS device. Help would be appreciated.

Was it helpful?

Solution

Did you try this?

$('#pincodebtn').on('click',function(){    
        alert('clicked');   
});

OTHER TIPS

Try the below code

$('#pincodebtn').on('click touchstart',function(){    
        alert('clicked');   
});

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top