Use with jQuery Mobile

[justinmc]

Can't seem to get this to work solidly with jquery mobile, specifically ajax page navigation on iOS. The button does not fully react to touch (changing color), and the page transition appears to start before completely reloading the next page instead of using ajax. Any way to stop fastClick from forcing a full reload on the link? I'm doing this:

$('#page1').live('pageinit', function() {

    $('button').fastClick(function() {
        $.mobile.changePage('page2.html', 'slide', 1, 1);
    });

});

Also, in case anyone else on jquery mobile is having problems, be sure to include the jQuery.fastClick.js file on every page that you transition to using fastClick, even if you are not using a fastClick button on that page. This fixed some other instability problems for me.

Otherwise I do notice the absence of the 300ms delay when I click the button and it works well, I would almost just forget the button effect and transition and use it.

[dave1010]

I'm not sure why this isn't working. Could you create a test case on http://jsfiddle.net/ ? Is it just iOS or Android / other browsers too?

[justinmc]

I'm unfamiliar with jsfiddle, but I pasted my code in and gave it a shot: http://jsfiddle.net/justinmc/6WSjw/1/

The test case works nicely in a browser anyway. Notice how buttons are not reacting like they should and pages are being fully refreshed. If you replace all fastClick() events with click() events, then the buttons react fine and there is no white flash of a page reload.

I just tested this using Xcode's iOS simulator, but I don't have any Android devices handy so I don't know about their behavior.