如何防止按钮保持突出显示

Question

我第一次接受javascript和jquery(移动),但现在碰到了我无法解决的问题.

我有一个带有4个按钮的简单表单,当单击一个按钮时,一个命令被提交给服务器(使用ajax).事情是界面,点击按钮(开始时的光线)变成蓝色并且不会返回到其原始状态.即使点击了其他按钮也没有,所以点击几下后,所有按钮都是蓝色的.

这是一个指向测试页面的链接(禁用了ajax命令)

这是页面;

<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 -->

和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; 
    });

});   

我怀疑它是愚蠢的东西,但如果有人可以指出我的代码中的愚蠢,我会很感激

谢谢!

Answer 1

简短的回答： 您需要删除ui-btn-active鼠标事件 onclick 完成时的 css 类。

如何？你说？

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