0

ユーザーが選択して回答できる複数の質問を含むモジュールを作成しています。それぞれに独自の送信ボタンがあり、データがアプリケーションに投稿され、結果が表示され、フォームが削除されます。この部分を完全に機能させることができましたが、ユーザーがすべてのフォームを一度に送信できるボタンを追加すると、フォームデータは正しく送信されますが、結果は最後の質問に追加されます (アイテムは正しいデータを取得しています) . これは私が使用しているjavascript/jQueryコードです:

// setup the save answer click handler
$(document).on('click', '.saveAnswer', function(event){
    event.preventDefault();

    // get the form
    form = $(this).closest('form');

    $.ajax({
        async:true,
        type: 'POST',
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data){
            // append the text to the bottom of the answers
            form.closest('.question').find('.answers').append('<li>' + data + '</li>').hide().slideDown(500);

            form.slideUp(500,function(){
                form.remove();
            });
        }
    });

});

// setup the save all answer click handler
$(document).on('click', '.saveAll', function(){
    $('.saveAnswer').trigger('click');
});

値を falseに変更するasyncと正しく動作しますが、アニメーションはまったく機能せず、すべての回答が送信されるまでページが一瞬フリーズしたように見えます。

formいくつかのデバッグの後、関数が実行されるたびに変数が上書きされることがわかりました。これを防ぐ方法はありますか？

4

2 に答える 2

2

formsuccessこれは、ハンドラーへの各呼び出しが古い値を踏みにじり、 /errorコールバックがすべて同じ値を共有することを意味します。

var form = $(....);ハンドラーの各呼び出しが独自の値を持つように、ローカル ( ) にします。

于 2012-05-22T15:13:41.100 に答える
1

念のため、変数のスコープを変更したくない場合は、クロージャーを使用してフォーム変数を次のように保存できます

form = $(this).closest('form');
$.ajax({
        .....
        success:(function (formClosure) {
            return function(data){ 
            // for this function formClosure will be local variable, 
            // so changing form variable doesn't take effect
            formClosure.closest('.question').find('.answers').append('<li>' + data + '</li>').hide().slideDown(500);

            formClosure.slideUp(500,function(){
                form.remove();
            });
          };
        })(form)
    });
于 2012-05-22T15:26:35.753 に答える