How do you remove a button's active state with jQuery Mobile?_问答_开发者

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 special like that.
I understood I can eliminate the page tran开发者_如何学Gositions by doing return false or preventDefault()
But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).

Thanks.

You can disable the 'highlighted blue'-state in the 'mobileinit'-event before loading jQueryMobile-script:

<head>
    <script>
    $(document).bind('mobileinit', function () {
        $.mobile.activeBtnClass = 'unused';
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

Now, when you click on a link, no class will be added after the click is performed. You will still have the 'hoover' and 'down' classes.

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 class="ui-btn myButton">Button</button>

Alternatively, you could also use jQuery mobile input buttons:

<form>
    <input value="Button One" type="button" class="myButton">
    <input value="Button Two" type="button" class="myButton2">
</form>

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.

<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>

Do NOT set the activeBtnClass to '' as suggested, this will cause errors when closing dialogs and the pageLoading function.

The method described does work, but cannot be set to null, the activeBtnClass variable is used as a selector, so set it to a non-existent class to get the same effect without the error.

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).bind('mobileinit', function () {
            $.mobile.activeBtnClass = 'aBtnSelector';
        });
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

This works well to remove the highlight from the buttons while keeping the active state on other elements.

you can just do it via css instead of java:

eg: (you get the idea)

#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options  .ui-link-inherit{
    background:inherit;
    color:inherit;
    text-shadow:inherit;
}

What I do is force the buttons to revert to inactive state before a page changes.

//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
    $(this).removeClass("ui-btn-active");
});

If you want to support non touch devices you should add timeout.

$('.btn' ).on('touchend click', function() {
    var self = this;
    setTimeout(function() {
            $(self).removeClass("ui-btn-active");
        },
    0);
});

I have spent the good part of a day and night finding the answer to this problem mainly occurring on an android running phonegap. Instead of the standard JQM buttons I am using custom images with :active state in CSS. After following the link to the next page, then clicking back, the button would just stay in the :active state. I have tried adding classes and removing classes and various other suggestions and nothing has worked.

So I came up with my own little fix which works a treat and may help anyone else that is sitting here stumped. I simply call this snippet of code on 'pagecontainerchange' using data.toPage[0].id to only call it on the page where the active state stuck is occurring. Just make sure to wrap your buttons in a div, in my case called "themenu".

function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");

}

This works for a button in the JqueryMobile headerTab

<style>
.Foo {
    color: #FFF !important;
    background: #347b68 !important;
 }
</style>

<div id="headerTab" data-id="headerTab" data-role="navbar">
  <ul id="header_tabs">
    <li><a href="#" data-transition="none" id="unique-id" class="Foo">name</a>
          </li>
  </ul>
</div>