How do you remove a button's active state with jQuery Mobile?

Question

In my mobile app, using jQuery Mobile...

• I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing sp

Answer 1

Update:

This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:

Step 1:

Button

Alternatively, you could also use jQuery mobile input buttons:

Step 2: Then your standard jquery on callback:

$(".myButton").on("tap", function(e) {
    // do your thing
});

If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.

---

Selectively removing active state:

As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.

Step 1:

    $(document).bind('mobileinit', function() {
        $(document).on('tap', function(e) {
            $('.activeOnce').removeClass($.mobile.activeBtnClass);
        });
    });

Step 2:

Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.

And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.