jQueryUI的.button（）保持与它在Firefox打开用户界面对话框

Question

链接的jsfiddle后按：本live linkhttp://jsfiddle.net/6UWZQ/1

的样子，如果你对任何行点击删除或编辑后点击取消，该按钮将继续（仅在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

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

Answer 2

，因为它是一个jQuery错误，我的解决办法是要做到这一点，而不是按钮（）的：

$(".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 3

在 “jQuery的UI-1.8.7.custom.min.js” 文件，在的jQuery UI按钮面积，改变

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

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

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

但是请注意，这两个解决方案仍然有这个怪癖：如果您单击并释放它会以无焦点的，但如果你切换标签，回来它会被聚焦。

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

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

结合以上建议，我能够通过包括本在$来解决问题网页上的所有按钮（文件）。就绪

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

Answer 7

如何添加到对话初始化：

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