Ajax submit presents full post after first submit

Question

The first pitch works as expected, but the next time it is completely sent back. I am using the jQuery.form plugin, specifically a call .ajaxSubmit(options)to submit a form. There are a couple levels of the div shell, but I am debugging the button.click bindings, and I can’t understand why the second time, even with the same variables, it makes a full post, and my partial view returns a completely new page.

here, buttonidand the screenidsame on both posts. I indicate this because they are calculated according to the naming convention, for example <name>Outer(wrapper), <name>(update target) and <name>Form(form to submit)

$('.formButton').click(function () {
    var buttonid = $(this).attr('id');
    var screenid = $('#' + buttonid).closest('div:not(.CSRForm)').attr('id').replace('Outer', '');
    //appends a hidden element so I know which button was pressed when posted
    $('#' + screenid + 'Form').append('<input type="hidden" name="submitButton" value="' + buttonid.replace(screenid, '') + '" />');
    $('#' + screenid + 'Form').submit();
}); 

the mind of the .formButtonelements is not inside the form, so I had to bind the submit event as such. My partial view returns a form, not buttons (they are dynamic)

here is .ajaxSubmit:

$('.CSRForm').submit(function () {
    var needsValidation = "yes";
    if (needsValidation) {
        $(this).ajaxSubmit({
            target: '#AccountSetup',
            replaceTarget: false,
            success: StepCallWithForm //to check whether the response is valid for redirecting
        });
        return false;
    }
}); 

and my MVC action, if it matters:

    public ActionResult AccountSetup(AccountSetupViewModel vm, string submitButton)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(vm);
        }
        else
        {
            return Content(submitButton + ",AccountSetup");
        }
    }

Edit: Inserting this line directly into mine $(function() {:

$('#AccountSetup').ajaxForm();

I was able to stop the full postback. In Firebug, I now see the ajax postback to /CSR/Home/CSR?, where it all starts. It is like a form that has lost its validity. Are my events somehow cross?

Answer 1

click jQuery live(), AJAX. , :

$('.formButton').click(function () {

$('.formButton').live("click", function () {

Answer 2

, .

, HTML ( HTML ), . HTML ( ) - HTML- . , HTML . , , , .

, submit Ajax , , . submit :

$(function() {
    ajaxifyForm();
});

function ajaxifyForm() {
    $('#AccountSetup').ajaxForm({
        target: '#AccountSetup',
        replaceTarget: false,
        success: stepCallWithForm
    });
}

function stepCallWithForm(result) {
    // If you replace the #AccountSetup form with the 
    // returned partial result you need to reattach the AJAX submit:
    ajaxifyForm();
}

Answer 3

I know this is an old question, but I just wanted to add my 2 cents.

@Sohnee answer will work: live()does the job. Nonetheless outdated . It should be replaced by on:

$("#WrapperDiv").on({
      click:myFunction
   },"#formButton");