10

数週間前にjqueryフォーラムで運が悪かったので、ここでもう一度やり直します:)

作業中のプロジェクト用に単純なウィジェットを作成しましたが、奇妙な問題が発生しました。

実装例で説明するのが最も簡単です。 http://decko.dk/buttontest

このページには3つのボタンがあります。最初のものは私のドロップダウンウィジェットです。次は通常の無効化ボタン（A）で、最後のボタンは通常の有効化ボタン（B）です。次にページを更新すると（F5キーなどを押す）、有効なボタンが不思議なことに無効になります。なぜこれが発生するのかわかりませんが、そもそもボタンAが無効になっていないと、更新時にボタンBが無効になりません。また、ウィジェットコードでinsertAfterの呼び出しを削除しても、ボタンは無効になりません。なぜこの奇妙な行動が起こるのかを誰かが明らかにすることができますか？

ちなみに、これはFirefoxでしか再現できませんでした。

4

5 に答える 5

12

これは、Firefoxがフォームフィールド/コントロールの値と状態を記憶する方法のバグだと思います。

  1. 最初のページの読み込み後、<button>ドキュメントには3つの要素があり、<button id="button_a">無効になっています。（jQuery UIスタイルのボタンを有効または無効にすると、基になる要素が同じ状態に設定されます。）
  2. Firefoxは、2番目<button>が無効になっていることを記憶しています。
  3. ページの更新後、スクリプトが実行される前に、Firefoxはフォームフィールドとコントロールを復元します。2番目のを無効にします<button>が、スクリプトが実行されていないため、2番目のボタンは<button id="button_b">です。
  4. jQuery UIがのスタイル付きボタンを作成すると<button id="button_b">、それが無効になっていることを確認し、引き続き無効としてスタイルを設定します。

ここには2つの問題があります。

  1. Firefoxが無効になっている要素をどのように記憶するか。動的要素は考慮されていません。このためにMozillaにバグを提出することをお勧めします。
  2. ページの更新後、フォーム要素は無効のままになります。これが正しい動作であるかどうかはわかりませんが、これに関する2つのBugzilla レポートがあります。

テストケースは、<button>要素を動的に追加して無効<button id="button_a">にするだけで、jQuery /jQueryUIは不要です。

<!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>
于 2010-04-27T09:52:38.870 に答える
5

私もこの問題を抱えていて、Firefoxでのばかげた振る舞いにかかっていることがわかりました。私の修正は次のとおりです。

前：

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

後：

//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");
于 2010-10-15T22:45:55.860 に答える
0

HTTPヘッダーを過去の日付に設定するExpiresと、Firefox6.0での問題が解決しました。

于 2011-08-25T21:55:32.213 に答える
0

これが私が見つけた解決策がすべてのブラウザで本当にうまく機能することです...

各ボタン（無効にすることができます）にクラス'js_submit'を付けます

次に、ページがアンロードされたときに発生するpagehideイベントで、クラス'js_submit'を使用して無効になっているボタンを再度有効にします。

このイベントをサポートしていないブラウザー（IEなど）がエラーをスローしないように、イベントの割り当てをtrycatch内にラップします。

コードは次のとおりです。

<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);
}
于 2012-02-18T18:53:55.083 に答える
-2

私の場合、それはブートストラップのバグでした

<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">
于 2015-06-01T17:07:02.630 に答える