jquery mobile tap problem if pressed more than once

Question

All I want is to Refresh the page and pass a parameter back to my index controller, but Slide up the page.

If I press once, no problem. If I keep pressing Refresh then it literally doubles the call each time I press it. So if I press 3 times it calls the index view @ 4 times

$(document).ready(function(){
    $(".ui-btn-right").bind('tap vclick',function(event, ui){
        event.preventDefault();
    //  alert("saw tap");
        $.mobile.changePage( "/app/Person/index?refresh_view=true", { transition: "slideup", reloadPage: true} );
     });

});

And link is:

<a class="ui-btn-right" data-theme="b" href="/app/Person/index?refresh_view=true" data-transition="slideup">Refresh</a>

updated my answer as the solution has changed with the Beta 2 release — Phill Pafford, Aug 04 '11 at 13:46
Related: http://stackoverflow.com/questions/6862939/whats-the-right-way-to-do-document-ready-in-jquery-mobile — Phill Pafford, Aug 04 '11 at 14:10
I think 'vclick' contemplates 'tap'. Have you tried it with just vclick instead? — Tiago, Oct 04 '11 at 14:30

score 0 · Accepted Answer · answered Aug 03 '11 at 20:28

jQuery mobile is unique in that when the page changes, none of the elements in the DOM are removed. Since no elements are removed, their events stay there too. I'm guessing that your $(document).ready( ... ) function is getting called at every new page. So you're adding a new event to the .ui-btn-right element even though the other ones are still there. Try this:

$(document).ready(function(){
    $(".ui-btn-right").bind('tap vclick',function(event, ui){
        event.preventDefault();
    //  alert("saw tap");
        $('ui-btn-right').unbind('tap vclick');
        $.mobile.changePage( "/app/Person/index?refresh_view=true", { transition: "slideup", reloadPage: true} );
     });

});

Now, whenever you change pages, the event is removed so there aren't any duplicates when the $(document).ready( ... ) function is called again.

OK, so I adding unbind stabilizes it a little but every time I click refresh it does it twice. Consistently. — pcasa, Aug 03 '11 at 21:09
Actually, removed vclick and just left .bind('tap', function... and it does it once. Thanks. — pcasa, Aug 03 '11 at 21:13

Phill Pafford · Answer 2 · 2011-08-04T13:46:00.967

There was an issue with Beta 1 and vclick, they have fixed the issue in Beta 2:

http://jquerymobile.com/demos/1.0b2/

Backtrack: We’ve switched back from vclick to click for links

In Beta 1, we decided to use our custom vclick event for handling Ajax links to improve responsiveness and to hide the URL bar on the iPhone and Android phones. Even though we did quite a bit of testing before landing this for Beta 1, we began to hear feedback that this change was causing some significant issues out in the wild including:

Multiple click events causing navigation and form element issue – In certain situations, when tapping an element, tap/click events seem to fire twice on links and is due to edge cases where the target of the touch event and mouse event don’t match due to how the browsers calculate tolerances for these events. This is most pronounced on Android 2.1, but affected most WebKit-based browsers to varying degrees when a tap events occured near the edge of an element.

Click handlers in custom scripts didn’t “work” anymore – if a script bound only to click events on the document, the global vclick feature could interfere because the touch events may supercede click events so it events wouldn’t appear to trigger.

jquery mobile tap problem if pressed more than once

2 Answers2