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.

 

Published Thursday, June 23, 2011 2:30 PM by Yousef_Jadallah
Filed under: , ,

Comments

# re: useFastClick in JQuery Mobile

Thursday, June 23, 2011 10:50 AM by alon

this was very helpfull.

# re: useFastClick in JQuery Mobile

Thursday, June 23, 2011 11:53 PM by Muaz Khan

That's nice....I upgraded from alpha 4 to beta 1....but I actually don't know this feature....

# re: useFastClick in JQuery Mobile

Monday, June 27, 2011 3:00 PM by Fred Ramsey

Or you could just bind to the 'tap' event.

# re: useFastClick in JQuery Mobile

Wednesday, July 6, 2011 7:31 AM by Yousef_Jadallah

I want to draw your attention that they switched back to using click instead of vclick for Ajax links and removed the useFastClick option. Anyone use the latest or any version after Beta needs to switch back to click.

Thats because in some cases and browsers, when the user tap/click events seem to fire twice on links.

Then no use for useFastClick anymore..

# re: useFastClick in JQuery Mobile

Tuesday, July 19, 2011 1:40 AM by Yousef_Jadallah

Dear Menno Bieringa,

Thanks for your comment.Yes,that what I was mentioned in the last comment.

# re: useFastClick in JQuery Mobile

Sunday, July 24, 2011 2:36 AM by Raymond Tsang

Thank you for explaining the new option useFastClick. Apparently this useFastClick breaks some of jQuery Datepicker plugin functionality after upgrading to jqm Beta.  I just set useFastClick to false for a quick workaround.

# re: useFastClick in JQuery Mobile

Sunday, July 24, 2011 2:53 AM by Yousef_Jadallah

Absolutely that is the workaround to make DatePicker works with beta 1. On the other hand, as we mentioned before that will be solved automaticaly with the next releases. Also you can use jQuery Mobile Themed DatePicker: github.com/.../jQuery-Mobile-Themed-DatePicker

Thanks.

Leave a Comment

(required) 
(required) 
(optional)
(required)