表单不会使用Ajax提交，但通常会

Question

Consider the following code:

$('.saveCheck').on('click',function()
   {
        var frm = $(this).parents('form');
        frm.submit(function (ev)
        {   
            $.ajax
                ({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data)
                    {alert("hooray!");}
            });
            ev.preventDefault();
        });  
   });

This will not submit my form, however:

frm.submit();

On its own works fine, but wont have any of the AJAX goodness.

Is there any glaringly obvious reason for this?

Answer 1

You code is set up so that when saveCheck is clicked it will bind a submit handler so that when the form is later submitted, it will call the Ajax function.

It sounds like what you want to do is to just run the Ajax function when saveCheck is clicked. Get rid of your submit handler binding entirely.

$('.saveCheck').on('click', function(ev) {
    var frm = $(this).parents('form');
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function(data) {
            alert("hooray!");
        }
    });
    ev.preventDefault();
});

That said, you should probably be using a submit handler on the form instead of a click handler on a button.