9

jQueryで次のことを行う：

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    $('#signup1').addClass("btn_wait");
    var btn_val = $('#signup1').val();
    $('#signup1').val('');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {

            //doing stuff here

        $('#signup1').removeClass("btn_wait");
        $('#signup1').val(btn_val);
        }
    });

});

ajax呼び出しから応答を受け取るまで、クリックイベントも無効にするにはどうすればよいですか？したがって、ボタンをクリックすると、クラスが追加されたために待機ボタンに「変換」されるだけでなく、クリックイベントも「一時停止」されます...これは可能ですか？

事前にどうもありがとうございました！

4

2 に答える 2

14 
$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    var btn_val = $('#signup1').val();
    $('#signup1').addClass("btn_wait").val('').unbind('click');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {
            $('#signup1').removeClass("btn_wait").val(btn_val);
        },
        complete: function() {
            $('#signup1').bind('click'); // will fire either on success or error
        }
    });

});
于 2012-07-09T20:03:09.970 に答える
3

「現在ロード中」を示すフラグを追加できます。変数、プロパティ、属性など、何でも使用できます。この例では、jQueryを使用しています.data()

submitまた、フォームを送信するときに、送信ボタンにクリックハンドラーを追加する代わりに、イベントを使用することをお勧めします。

$('#signupform').on('submit', function() {

    var form = $(this),
        loading = form.data('loading'), //check loading status
        str, button, val;

    //if not loading
    if(!loading){

        //set loading to true
        form.data('loading',true);

        str = form.serialize();
        button = $('#signup1', form);
        val = button.val();

        // make it look like a waiting button
        button
            .addClass("btn_wait");
            .val('');

        $.ajax({
            type: "POST",
            url: "signup_step1.php",
            data: str,
            success: function(msg) {

                //remove loading state
                form.data('loading',false);

                //return button to normal
                button
                    .removeClass("btn_wait");
                    .val(val);
            }
        });
    }

});
于 2012-07-09T20:10:21.507 に答える