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.