Cómo evitar que un botón permanezca resaltado

Question

Tengo mi primer conocimiento en javascript y jquery (móvil) pero ahora encontré algo que simplemente no puedo resolver.

Tengo un formulario simple con 4 botones, cuando se hace clic en uno se envía un comando al servidor (usando ajax). La cosa es con la interfaz, que el botón presionado (claro como la luz para empezar) se vuelve azul y no vuelve a su estado original. Ni siquiera cuando se hace clic en otro botón, por lo que después de unos pocos clics, todos los botones son azules.

Here is a link to a test page (con los comandos ajax desactivado)

Y esta es la página;

<div id="mainPageHaard" data-role="page"> 

    <div data-role="header" data-position="fixed"> 
     <a href="index.html" data-icon="arrow-l" data-iconpos="notext" >Back</a> 
     <h1>Haard</h1> 
     <a href="index.html" data-icon="home" data-iconpos="notext" >Home</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <a id="btnHaardMax" data-role="button" data-icon="arrow-u">Maximaal</a> 
     <a id="btnHaardUp" data-role="button" data-icon="plus">Harder</a> 
     <a id="btnHaardDown" data-role="button" data-icon="minus">Zachter</a> 
     <a id="btnHaardMin" data-role="button" data-icon="arrow-d">Waakvlam</a> 
    </div><!-- /content --> 

    <div data-role="footer" data-position="fixed"> 
     <a href="#configPageHaard" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Config</a> 
    </div><!-- /footer --> 
</div><!-- /page --> 

Y el javascript

$(document).ready(function() { 

    $("#btnHaardMax").click(function(){ 
     //SendEvent("Gashaard_MAX", 18); 
     return true; 
    }); 
    $("#btnHaardUp").click(function(){ 
     //SendEvent("Gashaard_UP", 18); 
     return true; 
    }); 
    $("#btnHaardDown").click(function(){ 
     //SendEvent("Gashaard_DOWN", 18); 
     return true; 
    }); 
    $("#btnHaardMin").click(function(){ 
     //SendEvent("Gashaard_MIN", 18); 
     return true; 
    }); 
    $("#btnHaardStart").click(function(){ 
     //SendEvent("Gashaard_START", 18); 
     return true; 
    }); 
    $("#btnHaardStop").click(function(){ 
     //SendEvent("Gashaard_STOP", 18); 
     return true; 
    }); 

}); 

Sospecho que sea algo tonto, pero apreciaría si alguien me podría apuntar exactamente a la sillyness en mi código

Thx!

Answer 1

Respuesta corta: tiene que quitar la clase css ui-btn-active en el evento de ratón onclick está terminado.

¿Cómo? ¿tu dices?

$().ready(function(){ 
    $('some-selector').mousedown(function(){ 
     $('some-selector').addClass('ui-btn-active'); 
    }) 
    $('some-selector').mouseup(function(){ 
     $('some-selector').removeClass('ui-btn-active'); 
    }) 
    }) 

Answer 2

Yo recomendaría que una vez que se pulsa un botón, se desactiva hasta que la llamada AJAX ha completado, para evitar accidental de doble prensado, o si no tiene sentido que pulsar el botón de nuevo, deje esta deshabilitado Como sus botones no son botones reales, sino enlaces, vea how to disable/enable buttons and other form elements. Todavía tendrá que jugar con los nombres de las clases del enlace para que parezca que están activos o habilitados, como sugiere netbrain.

En mi humilde opinión, yo usaría real botones HTML.

Answer 3

Esta debería ser una solución bastante general para la mayoría de las personas que no desean este comportamiento predeterminado. tenga en cuenta que necesita el normalized vclick event.

$(document).bind("mobileinit", function(){ 
    $("div[data-role=footer] a").live('vclick', function (e) { 
    $(this).removeClass("ui-btn-active"); 
});