0

ajaxリクエストの処理中に、ボタン（実際にはdiv）のテキストを「Working」に変更したいと思います。また、ajaxプロセスが終了するまで、それらが再度クリックされないようにしたいと思います。その場合、ボタンを有効にして、テキストを「保存」に戻したいと思います。

これを処理するために、JQueryの.ajaxStart（）および.ajaxStop（）グローバルイベントを使用することを考えていました。このようなもの：

$(document).ajaxStart(function () {
    $('#btnSave').each(function() {
        $(this).data('eventsbackup', $(this).data('events'));
        $(this).data('events', null);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('#btnSave').each(function () {
        $(this).html('Save');
        $(this).data('events', $(this).data('eventsbackup'));
        $(this).data('eventsbackup', null);
    });
});

このアプローチに何か問題がありますか？unbind（）を使用する代わりに.data（'event'）をnullに設定することについて少し心配していますが、ボタンにバインドされているイベントの数がわかりません。このアプローチは問題を引き起こす可能性がありますか？

4

1 に答える 1

3

大きな問題が1つあります。クラスではなく、IDを使用しているため、最初のボタンだけが影響を受ける可能性があります。

ボタンを変更してクラスを使用し、次にjQueryを次のように変更します$(".buttons").each()

ボタンの有効化/無効化についてはis-disabled、ボタンにデータ属性を使用して、クリック機能内でテストしてみませんか。このようなもの

<a href="#" id="get-files" class="button">Get Files</a>
<a href="#" id="get-folders" class="button">Get Folders</a>

クリックコードのサンプル

$("#get-files").click(function(e) {
    var isDisabled = $(this).data("is-disabled");
    if(!isDisabled) {
        // run Ajax Code
    }
}); // Do the same for #get-folders, even better wrap it in a reusable function

次に、既存のコードを使用して

$(document).ajaxStart(function () {
    $('.button').each(function() {
        $(this).data("is-disabled", true);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('.button').each(function () {
        $(this).html('Save');
        $(this).data("is-disabled", false);
    });
});
于 2012-05-23T21:23:06.710 に答える