Question

我第一次接受javascript和jquery（移动），但现在碰到了我无法解决的问题。

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

Here is a link to a test page（禁用了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; 
    });

});

我怀疑这是愚蠢的事情，但如果有人可以在我的代码中指出我的愚蠢话，我会很感激

THX！

Answer 1

简答： 你需要删除鼠标事件上的css类ui-btn-active onclick完成。

如何？你说呢？

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

Answer 2

我建议您按下一个按钮后，在AJAX呼叫完成之前将其禁用，以避免意外双击，或者再次按下按钮没有意义，请将其禁用。由于您的按钮不是真正的按钮而是链接，请参阅how to disable/enable buttons and other form elements。你仍然需要摆弄链接的类名，以阻止它们看起来像是活跃的或启用的，如netbrain建议的那样。

恕我直言，我会使用真正的 HTML按钮。

Answer 3

对于大多数不想要此默认行为的人来说，这应该是一个非常通用的解决方案。请注意，您需要normalized vclick event。

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

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

3 个答案: