Jquery UI 按钮在刷新时被禁用

发布于 2024-08-30 18:27:20 字数 452 浏览 4 评论 0原文

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

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

通过示例实现来解释它是最简单的。 http://decko.dk/buttontest

页面上有3个按钮。第一个是我的下拉小部件。下一个是常规禁用按钮 (A)，最后一个是常规启用按钮 (B)。如果您随后刷新页面（按 F5 或其他方式），则启用的按钮现在会神秘地禁用。我不知道为什么会发生这种情况，但是如果按钮 A 一开始就没有被禁用，则刷新时按钮 B 将不会被禁用。另外，如果我在小部件代码中删除对 insertAfter 的调用，则该按钮将不会被禁用。谁能解释为什么会出现这种奇怪的行为？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

貪欢 2024-09-06 18:27:20

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

第一个页面加载后，文档中有三个
Firefox 会记住第二个
页面刷新后，在运行任何脚本之前，Firefox 会恢复表单字段和控件。它禁用第二个
当 jQuery UI 为

这里有两个问题：

Firefox 如何记住哪些元素被禁用。它没有考虑动态元素。我建议为此向 Mozilla 提交错误。
页面刷新后，表单元素保持禁用状态。我不确定这是否是正确的行为，但有两个 bugzilla 对此进行了报告。

测试用例可以简化为仅动态添加

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

I believe this is a bug in how Firefox remembers form field/control values and states:

After the first page load, there are three <button> elements in the document, and <button id="button_a"> is disabled. (When the jQuery UI styled button is enabled or disabled, it sets the underlying element to the same state.)
Firefox remembers that the second <button> is disabled.
After a page refresh, before any scripts are run, Firefox restores form fields and controls. It disables the second <button>, but since no script has been run, the second button is <button id="button_b">.
When jQuery UI creates the styled button for <button id="button_b">, it sees that it is disabled and continues to style it as disabled.

There are two issues here:

How Firefox remembers which elements are disabled. It's not taking into account dynamic elements. I suggest filing a bug with Mozilla for this.
Form elements stay disabled after a page refresh. I'm not sure if this is the correct behaviour, but there are two bugzilla reports on this.

The test case can simplify down to just adding a <button> element dynamically and disabling <button id="button_a">, no jQuery / jQuery UI necessary:

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

回复收藏 0 原文

凉宸 2024-09-06 18:27:20

我也遇到了这个问题，并发现这是由于 Firefox 中的愚蠢行为，我的修复如下：

之前：

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

之后：

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

I've been getting this problem also and worked out it was down to silly behaviour in firefox, my fix was as so:

before:

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

after:

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

回复收藏 0 原文

旧时浪漫 2024-09-06 18:27:20

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

回复收藏 0 原文

转瞬即逝 2024-09-06 18:27:20

这是我发现在所有浏览器中都非常有效的解决方案...

我为每个按钮（可以禁用）提供一个“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);
}

Here is the solution I found works really well in all browsers...

I give each button (that can be disabled) a class 'js_submit'

I then re-enable any disabled buttons with class 'js_submit' on the pagehide event that fires when a page is unloaded.

I wrap the event assignment inside a try catch to prevent browsers that don't support this event from throwing an error (such as IE).

Here is the code:

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

回复收藏 0 原文

我一直都在从未离去 2024-09-06 18:27:20

就我而言，这是一个 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">

In my case it was a Bootstrap bug

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

Instead it should have been

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

回复收藏 0 原文

~没有更多了~

关于作者

小帐篷

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

Jquery UI 按钮在刷新时被禁用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

Jquery UI 按钮在刷新时被禁用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。