Railsでjquery ajaxを使用すると正しく動作しません。

Question

現在、私はレールを勉強していますので、jqueryを使ってフォームにAjaxを送信するようになっています。私はujについて知っていますが、使用したくありません。私は純粋なjavascriptまたはjqueryを学習目的に使用したい（それを理解する）。だから、私は私が送信ボタンをクリックしたときにはそれがとを無効になり、この問題を持っても、私はこの方法を使用する場合

$(function() { 
    var form = $('#new_post'); 
    var formData = $(form).serialize(); 

    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
}); 

シリアル化formDataは空ですが、私はこの方法を試したとき

$(function() { 
    var form = $('#new_post');  
    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: $(form).serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
}); 

私はajax内で直接$(form).serialize()を呼び出しています。私は違いは何かを理解していないが、私はすでにいくつかの研究をしようとしたが、私は答えを見つけることができない。

ところで、これはレールが形成されます。

​​

Answer 1

は、このようにコードを変更し

：

$(function() { 
    var form = $('#new_post'); 
    // Directly use the variable created above 
    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: form.serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
}); 

以下のコードは動作しません。

$(function() { 
    var form = $('#new_post'); 
    //formData is empty when the page loads and the same value is getting assigned inside the ajax call which is wrong. 
    //Therefore the best way is to directly get the data while submitting the form. 
    var formData = form.serialize(); 

    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     //Here formData is empty 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
}); 

Answer 2

私はすでに、なぜ知っています。それは、ユーザによって入力されたデータを持つように笑

$(function() { 
    var form = $('#new_post'); 

    form.submit(function(event) { 
    var formData = form.serialize(); 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    }) 
}); 

var formData = form.serialize();は、提出イベント内でなければなりません。