useFastClick in JQuery Mobile
For those who want to convert the application from JQM Alpha to JQM Beta 1, you need to bind click events to the new vclick one. Click event is working in general browsers but it is needed for iOS and Android, useFastClick is (touch + mouse click). Moreover if you have this event alot in your project you can turn useFastClick off in mobileinit event:
$(document).bind("mobileinit", function () { $.mobile.useFastClick = false; });
vclick event is needed to support touch events to make the page changes to happen faster, and to perform the URL hiding.
So you need to change something like this $('btnShow').live("click", function (evt) {
To :
$('btnShow').live("vclick", function (evt) {
For more information : http://jquerymobile.com/test/docs/api/globalconfig.html
Here you can find full example in this case :
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
//Here you need to use vclick instead of click event
$('ul[id="MylistView"] a').live("vclick", function (evt) {
alert('list click');
}); </script>
<title></title>
</head>
<body>
<div id="FirstPage" data-role="page" data-theme="b">
<div data-role="header">
<h1>
Page Title</h1>
</div>
<div data-role="content">
<ul id="MylistView" data-role="listview" data-theme="g">
<li><a href="#SecondPage">Acura</a></li>
<li><a href="#SecondPage">Audi</a></li>
<li><a href="#SecondPage">BMW</a></li>
</ul>
</div>
<div data-role="footer">
<h4>
Page Footer</h4>
</div>
</div>
<div id="SecondPage" data-role="page" data-theme="b" >
<div data-role="header" >
<h1>
Page Title</h1>
</div>
Second Page<div data-role="footer">
<h4>
Page Footer</h4>
</div>
</div>
</body>
</html>
Hope that helps.
Update: No longer use for this option after Beta 1.