0

Firefoxで問題が発生しました。フォーム送信ボタンを取得して、ユーザーがクリックしたときに「読み込み中」を表示しようとしています（サイトが遅いためにユーザーが2、3回クリックするのを防ぐため）。

私はこのjqueryコードを持っています：

$(document).ready(function(){
     $('.submitButton').click(function() {
        document.aform.submit();
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

Chromeはそれを正しく実行しますが、Firefoxは周囲のスパンのHTMLのみを変更し、フォームを送信しません。ボタンを2回クリックすると、Firefoxが送信します。変更している.html（）の行を削除すると、問題なく送信されます。

参照用のフォームコードは次のとおりです。

<form name="aform" action="index.php" enctype="multipart/form-data" method="post">
    ...form data
    <span class="buttonSpan">
         <button class="btn btn-primary submitButton" name="submit"/>Submit</button>
    </span>
</form>

FirefoxはHTMLの変更を優先し、他のすべてを無視しますか？繰り返しますが、これはChromeで正常に機能しますが、Firefoxは本当に私を殺しています！

ありがとう！

4

5 に答える 5

3

ほとんどの場合submit、送信ボタンのクリックイベントではなく、フォームのイベントを使用することをお勧めします。（Enterボタンを押してフォームを送信するとどうなりますか？）

$(function(){
     $('form[name=aform]').submit(function() {
        $('.buttonSpan', this).html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

これを使用する場合は、以下に説明するように、送信ボタンのhtmlを修正する必要があります。

それ以外の場合は、送信ボタンに関連するフォームを見つけることをお勧めします。

$(function(){
     $('.submitButton').click(function() {
         $(this).closest("form").submit()
        .find('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

また、送信ボタンを定義する適切な方法は次のとおりです。

<input type="submit" class="btn btn-primary submitButton" value="Submit" name="submit"/>
于 2012-06-30T13:20:12.140 に答える
2

私にとっては機能しますが、クリックハンドラー中にドキュメントからボタンを削除すると、一貫性のない動作が発生する可能性があります。フォームを送信するデフォルトのアクションは、クリック時またはクリック後のイベントでそれを所有していたフォームに適用されますか？ -デフォルトのアクションが発生する時間（フォームなし）？

このあいまいさを避けてください。ボタンを新しいマークアップに置き換えて破壊しないでください。代わりに、次のように変更します。

<button type="submit" class="btn btn-primary submitButton" name="submit">Submit</button>

$('.submitButton').click(function() {
    $(this).text('Loading...');
    $(this).removeClass('submitButton');
    $(this).addClass('disabled');
});

form.submit()（a）とにかく送信ボタンのデフォルトのアクションであるため、呼び出す必要はないことに注意してください。（b）Munterが言ったように、document.namedElement悪い形式です。（c）d_inevitableが言ったように、フックform.onsubmitはほとんどの場合、より良い方法ですbutton.onclick。ただし、特にマウスのクリックだけが心配な場合は、ここではないかもしれません。

于 2012-06-30T13:43:26.147 に答える
1

のように名前でdom要素にアクセスすることはdocument.aformお勧めしません。

フォーム内にはすでにボタンがあるため、buttons.formプロパティを使用する必要があります。

だから何かのような

button.onclick = function（）{
    this.form.submit（）;
}
于 2012-06-30T13:18:29.067 に答える
1

これを試して：

$(document).ready(function(){
     $('.submitButton').click(function() {
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
        $('form').submit();
     });
});
于 2012-06-30T13:21:35.420 に答える
0

これが実際の例です：FFhttp://jsfiddle.net/JV68U/でテスト済み

于 2012-06-30T13:34:54.263 に答える