Question

查看此live link，如果单击删除或编辑中的任意行，单击取消后，该按钮将保持突出显示（仅限Firefox）

我按下这样的按钮：

$("input[type=submit]").addClass("abtn"); 
$("tbody a").addClass("abtn");
$(".abtn").button();

我在提交按钮上使用css类为每个表单添加一个确认对话框，如下所示：

<script type="text/javascript">
        var currentFormconfirm;
        $(function () {
            $("#dialog-confirm-confirm").dialog({
            show: "drop",
            hide: "fade",
                resizable: false,
                height: 220,
                width: 400,
                modal: true,
                autoOpen: false,
                buttons: {
                    'Yes': function () {
                        $(this).dialog('close');
                        currentFormconfirm.submit();
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            $(".confirm").click(function () {
                currentFormconfirm = $(this).closest('form');
                $("#dialog-confirm-confirm").dialog('open');
                return false;
            });
        });

</script>
<div id="dialog-confirm-confirm" title="Confirm dialog">
    Are you sure you want to delete this foobar ?
</div>

和表格：

<form action="/awesome/foobar/Delete/7" method="post" class="fr">
                    <input type="submit" class="confirm abtn ui-button ui-widget ui-state-default ui-corner-all" value="Delete" role="button" aria-disabled="false">
                    </form>

Answer 1

也有点晚了，但是......

结合上面的建议，我能够通过将其包含在$（文档）中来解决页面上所有按钮的问题.ready

$("button, input[type='button'], input[type='submit']").button()
    .bind('mouseup', function() {
        $(this).blur();     // prevent jquery ui button from remaining in the active state
});

Answer 2

这似乎是bug in jquery ui 1.8.1。这是一个简化的test case来重现行为。问题是ui-state-focus类没有删除。

Answer 3

Hoang的解决方案有效，但是如果你不想破解jquery ui源，另一种方法是在你的onClick中调用removeClass。例如：

button.click(function() {
    button.removeClass("ui-state-focus ui-state-hover");
}

但请注意，这两种解决方案仍然存在这样的疑问：如果您单击并释放它将无法聚焦，但如果您切换标签并返回它将会集中注意力。

Answer 4

在“jquery-ui-1.8.7.custom.min.js”文件的 jQuery UI Button 区域，更改

.bind("mouseup.button",function(){
    if(c.disabled)return false;
    a(this).removeClass("ui-state-active")
})

到

.bind("mouseup.button",function(){
    if(c.disabled)return false;
    a(this).removeClass("ui-state-active ui-state-hover ui-state-focus")
})

Answer 5

我知道它有点晚了，但问题仍然存在，我做了一个实际的简单修复，即调用按钮上的模糊功能。

$('#myButton').blur();

打开对话框后立即调用blur()方法。

这是一个片段：

$('#cbDate').button();
if(date == "infinite")
{
    $('#cbDate').checked = true;
    $('label[for=cbDate]').addClass('ui-state-active');
    //This is the interesting part
    $('#cbDate, label[for=cbDate]').blur();
}
else
{
    $('#cbDate, label[for=cbDate]').blur();
}

Answer 6

因为它是一个jquery错误，我的解决方案是执行此操作而不是button（）：

   $(".abtn")
                .hover(function () { $(this).addClass("ui-state-hover"); },
                    function () { $(this).removeClass("ui-state-hover"); })
                .bind({ 'mousedown mouseup': function () { $(this).toggleClass('ui-state-active'); } })
                .addClass("ui-state-default").addClass("ui-corner-all")
                .bind('mouseleave', function() { $(this).removeClass('ui-state-active') });

Answer 7

如何添加到对话框init：

open: function() { $('.ui-button').blur(); }

Answer 8

以下在jQuery 1.8.17中运行良好：

$(document).ready(function() {

    ...

    $(".ui-button").live('click', function() {
        $(this).blur();
        $(this).removeClass("ui-state-focus ui-state-hover");
    });
})

在firefox中打开ui对话框后，jQueryUI .button（）仍保持按下状态

8 个答案: