Question

几周前我在jquery论坛上问过这个没有运气的事情，所以我会在这里再试一次:)）

我为我正在进行的项目制作了一个简单的小部件，但我遇到了一个奇怪的问题。

用一个示例实现来解释它是最容易的。 http://decko.dk/buttontest

页面上有3个按钮。第一个是我的下拉小部件。下一个是常规禁用按钮（A），最后一个是常规启用按钮（B）。如果您然后刷新页面（按F5或其他），启用按钮现在神秘地被禁用。我不知道为什么会发生这种情况，但如果按钮A没有被禁用，则刷新时不会禁用按钮B.此外，如果我在我的小部件代码中删除对insertAfter的调用，则不会禁用该按钮。任何人都可以阐明为什么会出现这种奇怪的行为吗？

顺便说一句，我只能在Firefox中重现这一点。

Answer 1

我认为这是Firefox记住表单字段/控件值和状态的错误：

首次加载页面后，文档中有三个<button>元素，并且<button id="button_a">被禁用。（当启用或禁用jQuery UI样式按钮时，它会将基础元素设置为相同的状态。）
Firefox记得第二个<button>被禁用。
页面刷新后，在运行任何脚本之前，Firefox将恢复表单字段和控件。它会禁用第二个<button>，但由于没有运行任何脚本，因此第二个按钮为<button id="button_b">。
当jQuery UI为<button id="button_b">创建样式化按钮时，它会看到它已被禁用并继续将其设置为已禁用。

这里有两个问题：

Firefox如何记住哪些元素被禁用。它没有考虑动态元素。我建议filing a bug with Mozilla为此。
表单元素在页面刷新后保持禁用状态。我不确定这是否是正确的行为，但此处有两个bugzilla reports。

测试用例可以简化为仅动态添加<button>元素并禁用<button id="button_a">，不需要jQuery / jQuery UI：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>disabled button test</title>
    <script type="text/javascript">
    window.onload = function () {
        var a = document.getElementById('button_a'),
            menu = document.createElement('button');
        menu.appendChild(document.createTextNode('Menu'));
        document.body.insertBefore(menu, a);
        a.disabled = true;
    };
    </script>
</head>
<body>
    <button id="button_a">A</button>
    <button id="button_b">B</button>
</body>
</html>

Answer 2

我也遇到了这个问题并且解决了它在firefox中的愚蠢行为，我的修复就是这样：

之前：

//set up the buttons
$("button").button();

后：

//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");

Answer 3

将Expires HTTP标头设置为过去的日期，在Firefox 6.0中解决了我的问题。

Answer 4

以下是我发现在所有浏览器中都能很好地运行的解决方案......

我给每个按钮（可以禁用）一个'js_submit'类

然后我重新启用了在卸载页面时触发的pagehide事件中具有类'js_submit'的任何禁用按钮。

我将事件赋值包装在try catch中，以防止不支持此事件的浏览器抛出错误（例如IE）。

以下是代码：

<input id="button" type="button" value="Submit" class="js_submit" />


// Fix for firefox bfcache:
try {
    window.addEventListener('pagehide', PageHideHandler, false);
} catch (e) { }

//Fires when a page is unloaded:
function PageHideHandler() {
    //re-enable disabled submit buttons:
    $('.js_submit').attr('disabled', false);
}

Answer 5

就我而言，这是一个Bootstrap bug

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn btn-primary btn-xs 
disabled" value="Add Appointment">

相反应该是

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn-primary btn-xs 
disabled" value="Add Appointment">

Jquery UI按钮在刷新时被禁用

5 个答案: