JQM: Deactivate Button after preventDefault()

Developing a mobile app, one might want to realize an action when a button is clicked without any page transition.
An alternative to do this with JQueryMobile (JQM) is to prevent the event’s default behavior within your event handler:

  <a id="mybutton"  data-role="button">MyButton</a>

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
        });

However, this will keep your button in an active state which does feel very responsive.

Simply returning true at the end of your handler function or trying to trigger the event again will not work. JQuery internally removes all flags of the event.

The solution to bring your button back into it’s not active status at the end of your handler, you need to manually remove jquery mobiles active button class.
This is supported by a global variable $.mobile.activeBtnClass.

So just change your handler code above and add the assignment of this class at the end:

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
            this.$('a').removeClass($.mobile.activeBtnClass);
        });